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.

I've edited my answer, with an option where you can set the disable columns in your TH definition. — Paulo Fidalgo, Jun 17 '13 at 22:29
Disable button using css. check out this page. https://datatables.net/forums/discussion/21164/disable-sorting-of-one-column#Comment_66660 — Eugine Joseph, Oct 11 '14 at 11:48
you may also want to look https://cbabhusal.wordpress.com/2015/05/20/jquery-datatables-turn-off-sorting-of-a-particular-column/ — Shiva, Aug 18 '15 at 02:42

score 180 · Answer 1 · answered Oct 05 '11 at 09:32

180

This is what you're looking for:

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

answered Oct 05 '11 at 09:32

wildehahn

1,851
1
12
13

3

this worked for me. If you want to sort first column, 'aTargets': [ -1 ], for second 'aTargets': [ 1 ], for third 'aTargets': [ 2 ] and so on. – Lasang Mar 20 '13 at 07:19
5

you can simply do 'aTargets': [ 1, 2 ] – Adriano Jul 02 '13 at 10:08
2

@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? – Dan Nissenbaum Feb 13 '14 at 06:49
1

`-1` is the index counting from the end of the table. ( `-1` is the last column of the table ) – Ramy Nasr Jun 27 '14 at 16:40
1

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. See http://stackoverflow.com/a/32281113/1430996 – Jeromy French Sep 08 '15 at 22:25
@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 Dec 24 '21 at 13:32

Jeromy French · Answer 2 · 2019-09-13T19:57:21.757

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/.

IMO, this is the best answer here, simplest and most elegant approach — Hamman Samuel, Mar 18 '16 at 17:24
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': [] }); — Brian Merrell, Aug 18 '16 at 14:09
@BrianMerrell Wellllllll...look at that! https://jsfiddle.net/ja0ty8xr/ You should open a GitHub issue for that behavior. :) — Jeromy French, Aug 18 '16 at 22:58

score 64 · Answer 3 · edited Nov 13 '14 at 18:56

64

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

edited Nov 13 '14 at 18:56

Kevin D

3,564
1
21
38

answered Jan 12 '11 at 19:11

Paulraj

3,373
3
36
40

@Paulraj The link is broken, would you mind changing it? – taufique Nov 13 '14 at 06:08
1

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. See http://stackoverflow.com/a/32281113/1430996 – Jeromy French Sep 08 '15 at 22:26

Paulo Fidalgo · Answer 4 · 2014-05-07T07:19:11.530

61

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.

edited May 07 '14 at 07:19

answered Jun 13 '13 at 10:16

Paulo Fidalgo

21,709
7
99
115

@larrylampco I've updated the post with updated links. – Paulo Fidalgo May 07 '14 at 07:19
Thanks.. what about loss of css when we apply sorting – Shanker Paudel Jul 08 '14 at 13:46
1

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 Jun 01 '16 at 15:39
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 Dec 24 '21 at 13:36

Bhavesh B · Answer 5 · 2013-12-03T06:35:26.200

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
    });
});

You should use `data-bSortable` instead of `bSortable`. `bSortable` isn't a valid HTML attribute. — James Donnelly, Nov 26 '13 at 15:52
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, Jun 01 '16 at 15:39

score 15 · Answer 6 · answered Feb 26 '15 at 20:53

columnDefs now accepts a class. I'd say this is the preferred method if you'd like to specify columns to disable in your markup:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

Then, in your JS:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});

score 11 · Answer 7 · answered Dec 09 '14 at 15:53

Here is what you can use to disable certain column to be disabled:

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

So all you have to do is add the "orderable": false to the column you don't want to be sortable.

score 6 · Answer 8 · edited Aug 18 '15 at 07:05

6

$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);

edited Aug 18 '15 at 07:05

Shiva

11,485
2
67
84

answered Nov 28 '13 at 05:32

abhinav

69
1
1

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]` – Matthew Apr 30 '14 at 15:40

score 5 · Answer 9 · edited Oct 05 '15 at 10:19

For Single column sorting disable try this example :

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

For Multiple columns try this example: you just need to add column number. By default it's starting from 0

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>

Here only Column 3 works

Marko Bajlovic · Answer 10 · 2015-11-09T00:47:31.317

5

As of 1.10.5, simply include

'orderable: false'

in columnDefs and target your column with

'targets: [0,1]'

Table should like like:

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});

edited Nov 09 '15 at 00:47

answered Oct 21 '15 at 15:39

Marko Bajlovic

323
5
12

score 5 · Answer 11 · answered Jan 04 '17 at 19:30

5

If you set the FIRST column orderable property to false, you must also set the default order column otherwise it won't work since first column is the default ordering column. Example below disables sorting on first column but sets second column as default order column (remember dataTables' indexes are zero based).

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

answered Jan 04 '17 at 19:30

Moses Machua

11,245
3
36
50

This is the answer that worked for me as of July 17, 2020 – Brian Jul 17 '20 at 18:00

score 4 · Answer 12 · answered Jan 24 '16 at 22:37

4

To update Bhavish's answer (which I think is for an older version of DataTables and didn't work for me). I think they changed the attribute name. Try this:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>

answered Jan 24 '16 at 22:37

Josh Mouch

3,480
1
37
34

This seems like a nice approach... if it worked, but it doesn't for me. Is it documented? – AllInOne Mar 07 '16 at 20:05
1

@AllInOne: yes, for `data-orderable`...see http://stackoverflow.com/a/32281113/1430996 . `data-sortable` also works, but I cannot find where it is documented. – Jeromy French Jun 01 '16 at 15:36
much better solution – Luiz Jun 20 '16 at 16:05

score 3 · Answer 13 · edited May 20 '15 at 12:26

3

"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

Here 0 is the index of the column, if you want multiple columns to be not sorted, mention column index values seperated by comma(,)

edited May 20 '15 at 12:26

Shiva

11,485
2
67
84

answered Aug 08 '13 at 06:37

coder

656
3
8
22

is it possible to disable the sorting for all the columns? – fidel castro Sep 09 '14 at 10:16
Yes it possible, you can visit this link to know https://cbabhusal.wordpress.com/2015/08/18/jquery-datatables-disable-sorting-for-all-columns/#more-1054 – Shiva Aug 18 '15 at 06:52
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 Dec 24 '21 at 13:36

score 2 · Answer 14 · answered Dec 27 '15 at 12:20

Using class:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

Now you can give "nosort" class to <TH>

score 2 · Answer 15 · answered Apr 01 '16 at 10:15

2

This works for me for a single column

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

answered Apr 01 '16 at 10:15

Amay Kulkarni

828
13
16

score 1 · Answer 16 · answered Jun 08 '15 at 05:45

If you already have to hide Some columns, like I hide last name column. I just had to concatenate fname , lname , So i made query but hide that column from front end. The modifications in Disable sorting in such situation are :

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

Notice that I had Hiding functionality here

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

Then I merged it into "aoColumnDefs"

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. — Kamlesh, Dec 24 '21 at 13:37

score 1 · Answer 17 · edited Apr 12 '17 at 17:50

1

Use the following code to disable ordering on first column:

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

To disable default ordering, you can also use:

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

edited Apr 12 '17 at 17:50

Mad Physicist

107,652
25
181
264

answered Apr 12 '17 at 17:27

Pushkaraj Bhandari

31
2

score 1 · Answer 18 · answered Nov 27 '18 at 14:21

There are two ways, one is defined in html when you define table headers

<thead>
  <th data-orderable="false"></th>
</thead>

Another way is using javascript, for example, you have table

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

then,

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);

score 0 · Answer 19 · answered Dec 06 '12 at 12:18

0

you can also use negative index like this:

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

answered Dec 06 '12 at 12:18

Nurul Ferdous

167
1
10

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 Dec 24 '21 at 13:34

score 0 · Answer 20 · edited Aug 18 '15 at 07:46

The code will look like this:

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});

score 0 · Answer 21 · answered Jan 17 '16 at 21:48

0

Here is the answer !

targets is the column number, it starts from 0

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

answered Jan 17 '16 at 21:48

BumbuKhan

41
6

score 0 · Answer 22 · answered Oct 17 '17 at 12:29

You can directry use .notsortable() method on column

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];

score -2 · Answer 23 · answered Apr 06 '16 at 11:29

-2

set class "no-sort" in th of the table then add css .no-sort { pointer-events: none !important; cursor: default !important;background-image: none !important; } by this it will hide the arrow updown and disble event in the head.

answered Apr 06 '16 at 11:29

Rahul

46
4

Disable sorting for a particular column in jQuery DataTables

23 Answers23

Linked