CODEWITHSUNDEEP
jquery-pluginsdatatables
Chankey Pathak
Chankey Pathak

Reputation: 21666

How to remove sorting option from DataTables?

I'm using DataTables plugin. I don't want to use the sorting option (to sort the columns in ASC or DESC order) which comes by default on each <thead>. How can I remove that sorting icon?

Upvotes: 50

Views: 217215

Answers (12)

Ricardo Rivera Nieves
Ricardo Rivera Nieves

Reputation: 1455

In the new version 1.10 of jQuery DataTables you must use ordering option to disable ordering on the entire table:

$('#example').DataTable({
    "ordering": false
});

Upvotes: 127

kevinpo
kevinpo

Reputation: 1963

Most of the other answers only deal with initial settings. I needed to disable sorting afterward via javascript based on user action.

If you pass in options to the DataTable function then it will fail because it has already been initialized. If you don't pass a parameter, then it will retrieve the current settings, and you can manipulate the existing settings.

$('#example').DataTable().settings()[0].aoColumns.forEach(function(c) { 
    // could use c.nTh to get the actual th element if needed
    c.bSortable = false;
});

Upvotes: 0

ravisolanki07
ravisolanki07

Reputation: 647

You can set it by bSortable to false in aocolumn like :

$('#example').dataTable({
    "aoColumns": [
        { "sType": "html","bSortable": false, "bSearchable": false },
        { "sType": "html" },
        { "sType": "html", "bSortable": false, "bSearchable": false },
        { "sType": "html" },
        { "sType": "html","bSortable": false, "bSearchable": false },
        { "sType": "html" },
        { "sType": "html" },
        { "sType": "html" },
        { "sType": "date-euro" }
    ]
});

You can also exclude from search by set bSearchable to false

Upvotes: 0

Ridoy Paul
Ridoy Paul

Reputation: 69

Simply you can use this

"ordering": false,

Full Code:

$('#example').DataTable({
    "ordering": false,
 });

Upvotes: 0

Vidhi Patel
Vidhi Patel

Reputation: 25

-> for removing sorting in particular column then use orderable: false

-> for removing search from particular column then use searchable: false

 $('#table-name').DataTable({
            "columns": [
                   {"data": "column_name"},
                   {"data": "column_name" , orderable: false},
                   {"data": "column_name"},
                   {"data": "column_name" , orderable: false},
                   {"data": "action"}
                  ],
                  aoColumnDefs: [
                    {
                       bSortable: false,
                       aTargets: [ -1 ]
                    }
                 ]
      });

Upvotes: 0

Anne B
Anne B

Reputation: 1

Old question but none of these answers worked for me since none of them prevented the sort on click and I didn't want to reinitialize, so I'll post my solution:

Basically, clone the header, removing the sorting class from the <th> cells, insert clone after real header and hide the original. When you want to reenable, just reshow original header and remove clone.

This worked for my case, you may have to adjust the thead selector you use depending on your setup.

// grab the header
const stashedHeader = $('.dataTable thead');
// copy it and remove sorting class from the copy's th cells
const nosortClone = stashedHeader.clone();
nosortClone.find('th').removeClass('sorting');
// hide original and insert clone after it
stashedHeader.hide().after(nosortClone);

...
// re-enable
stashedHeader.show()
nosortClone.remove();

Upvotes: 0

Julien B.
Julien B.

Reputation: 3324

You can also pass the option on the table itself using data attributes.

<table
   data-paging="false"
   data-searching="false"
   data-ordering="false"
>

The same principle applies to column headers.

<table>
<thead>
<tr>
    <th>I'm sortable</th>
    <th data-orderable="false">I'm not sortable</th>
</tr>
</thead>

But, I came across a situation where I wanted to remove all columns sorting and realize that Datatable still adds the icon on the first column when using a th data-orderable="false" on all columns, in that case, use the data-ordering on the table instead.

This can be handy should you use the same custom script to generate all your Datatables.

Upvotes: 24

Kashif Solangi
Kashif Solangi

Reputation: 928

There are 2 ways you can try.

First, try setting "bSort" to false. Note that, this will disable sorting all around.

$('#jTable').dataTable({ "bSort" : false } );

Second, try setting aaSorting to empty. Note that, this will remove sorting for specific column. $('#jTable').dataTable({ "aaSorting" : [[]] });

Let us know if either works for you. Hope it helps,

Kashif Solangi

Upvotes: 8

Jay Rizzi
Jay Rizzi

Reputation: 4304

Very similar to @ravisolanki07 , it's just a different way to achieve this.

var oTable = $('#example').dataTable( {
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0, 1, 2, 3 ] }, 
        { "bSearchable": false, "aTargets": [ 0, 1, 2, 3 ] }
    ]
});

Upvotes: 31

Marco
Marco

Reputation: 2892

Ok, so, the answers here are a bit old. So I thought I could provide e newer answer:

source documentation

As of 2018, the way to achieve this, per field, is:

$('#id-of-my-table').DataTable({
    "columnDefs": [
        { "orderable": false, "targets": [0, 4, 5, 6] },
        { "orderable": true, "targets": [1, 2, 3] }
    ]
});

As you can see, targets accepts an array of column indexes.

Upvotes: 16

Arzon Barua
Arzon Barua

Reputation: 514

Using the aoColumns attribute, sorting a specific column can be easily controlled. An example is given bellow:

$(document).ready(function() {
oTable = jQuery('#DataTables_Table_0').dataTable( {           
            "bDestroy": true,
            "bAutoWidth": true,  
            "bFilter": true,
            "bSort": true, 
            "aaSorting": [[0]],         
            "aoColumns": [
                { "bSortable": false },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": true },
                { "bSortable": false }
            ]   
        } );
 })

Upvotes: 3

tduchateau
tduchateau

Reputation: 4471

If you want to disable the default sorting but keep the columns sortable, just use the following configuration :

$(document).ready( function() {
    $('#example').dataTable({
        "aaSorting": []
    });
})

Upvotes: 16

Related Questions