Disable sorting for a particular column in jQuery DataTables

Question

I am using the jQuery DataTables plugin to sort the table fields. My question is: how do I disable sorting for a particular column? I have tried with the following code, but it did not work:

"aoColumns": [
  { "bSearchable": false },
  null
]   

I have also tried the following code:

"aoColumnDefs": [
  {
    "bSearchable": false,
    "aTargets": [ 1 ]
  }
]

but this still did not produce the desired results.

Solution 1

This is what you're looking for:

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});

Solution 2

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes.

-from DataTables example - HTML5 data-* attributes - table options

So you can use data-orderable="false" on the th of the column you don't want to be sortable. For example, the second column "Avatar" in the table below will not be sortable:

<table id="example" class="display" width="100%" data-page-length="25">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

See a working example at https://jsfiddle.net/jhfrench/6yxvxt7L/.

Solution 3

To make a first column sorting disable, try with the below code in datatables jquery. The null represents the sorting enable here.

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

Disable Sorting on a Column in jQuery Datatables

Solution 4

Using Datatables 1.9.4 I've disabled the sorting for the first column with this code:

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

EDIT:

You can disable even by using the no-sort class on your <th>,

and use this initialization code:

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

EDIT 2

In this example I'm using Datables with Bootstrap, following an old blog post. Now there is one link with updated material about styling Datatables with bootstrap.

Solution 5

What I use is just add a custom attribute in thead td and control sorting by checking that attr value automatically.

So the HTML code will be

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

And JavaScript for initializing datatables will be (it will dynamically get the sorting information from table iteself ;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});

View more solutions

Comments

[Paulo Fidalgo]

I've edited my answer, with an option where you can set the disable columns in your TH definition.

[Eugine Joseph]

Disable button using css. check out this page. datatables.net/forums/discussion/21164/…

[illusionist]

you may also want to look cbabhusal.wordpress.com/2015/05/20/…

[Lasang]

this worked for me. If you want to sort first column, 'aTargets': [ -1 ], for second 'aTargets': [ 1 ], for third 'aTargets': [ 2 ] and so on.

[Adrien Be]

you can simply do 'aTargets': [ 1, 2 ]

[James Donnelly]

You should use data-bSortable instead of bSortable. bSortable isn't a valid HTML attribute.

[Dan Nissenbaum]

@Lasang - Did you really mean [-1], then [1], [2], etc? What does the -1 mean? Doesn't indexing for columns begin at 1 for dataTables?

[Matthew]

Bhavesh's answer is clever, but overkill. To disable sorting simply use abhinav's answer. Disabling sorting on the first column add a column target in the aoColumnDefs option: "bSortable": false, "aTargets": [0]

[Paulo Fidalgo]

@larrylampco I've updated the post with updated links.

[Ramy Nasr]

-1 is the index counting from the end of the table. ( -1 is the last column of the table )

[Shanker Paudel]

Thanks.. what about loss of css when we apply sorting

[fidel castro]

is it possible to disable the sorting for all the columns?

[taufique]

@Paulraj The link is broken, would you mind changing it?

[illusionist]

Yes it possible, you can visit this link to know cbabhusal.wordpress.com/2015/08/18/…

[Jeromy French]

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. See stackoverflow.com/a/32281113/1430996

[Jeromy French]

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. See stackoverflow.com/a/32281113/1430996

[AllInOne]

This seems like a nice approach... if it worked, but it doesn't for me. Is it documented?

[Hamman Samuel]

IMO, this is the best answer here, simplest and most elegant approach

[Jeromy French]

@AllInOne: yes, for data-orderable...see stackoverflow.com/a/32281113/1430996 . data-sortable also works, but I cannot find where it is documented.

[Jeromy French]

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. See stackoverflow.com/a/32281113/1430996

[Jeromy French]

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. See stackoverflow.com/a/32281113/1430996

[Washington Morais]

much better solution

[Brian Merrell]

This disables the sort functionality, but I found (in 1.10.12) that the column is still sorted by default when the DataTable is initialized, which styles the column with an ascending sort glyph. If you don't want this, you can initialize the datatable without sorting like so: $('#example').DataTable({ 'order': [] });

[Jeromy French]

@BrianMerrell Wellllllll...look at that! jsfiddle.net/ja0ty8xr You should open a GitHub issue for that behavior. :)

[Brian]

This is the answer that worked for me as of July 17, 2020

[Kamlesh]

@wildehahn Wildehahn - I need your help, your solution does not work on first column when I use 0 "zero" in array as you suggested. "aoColumnDefs": [ { 'bSortable': false, 'aTargets': [0,1,6] } ],. kindly suggest how to solve this issue. Thanks.

[Kamlesh]

Thanks @Nurul, but I am not able to remove sorting feature from first column of datatable while I have tried with 0 "zero" and "-1" values. any suggestion. Thanks.

[Kamlesh]

Thanks @paulo, Paulo but I am not able to remove sorting feature from first column of datatable while I have tried with 0 "zero" and "-1" values. any suggestion. Thanks.

[Kamlesh]

Thanks @coder, but I am not able to remove sorting feature from first column of datatable while I have tried with 0 "zero" and "-1" values. any suggestion. Thanks.

[Kamlesh]

Thanks @Pratik, but I am not able to remove sorting feature from first column of datatable while I have tried with 0 "zero" and "-1" values. any suggestion. Thanks.