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
– Paulo Fidalgo, Commented Jun 17, 2013 at 22:29
Disable button using css. check out this page. datatables.net/forums/discussion/21164/… — Eugine Joseph
– Eugine Joseph, Commented Oct 11, 2014 at 11:48
you may also want to look cbabhusal.wordpress.com/2015/05/20/… — Shiva
– Shiva, Commented Aug 18, 2015 at 2:42

wildehahn · Accepted Answer · 2011-10-05 09:32:31Z

181

This is what you're looking for:

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

answered Oct 5, 2011 at 9:32

wildehahn

1,8611 gold badge12 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Lasang Over a year ago

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

Adri w Ukraine Over a year ago

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

Dan Nissenbaum Over a year ago

@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?

Ramy Nasr Over a year ago

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

Jeromy French Over a year ago

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 · Accepted Answer · 2019-09-13 19:57:21Z

96

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

edited Sep 13, 2019 at 19:57

answered Aug 28, 2015 at 23:21

Jeromy French

12.1k19 gold badges79 silver badges136 bronze badges

3 Comments

Hamman Samuel Over a year ago

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

Brian Merrell Over a year ago

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 Over a year ago

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

Kevin D · Accepted Answer · 2014-11-13 18:56:14Z

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, 2014 at 18:56

Kevin D

3,5921 gold badge24 silver badges38 bronze badges

answered Jan 12, 2011 at 19:11

Paulraj

3,4173 gold badges38 silver badges43 bronze badges

2 Comments

taufique Over a year ago

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

Jeromy French Over a year ago

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

Paulo Fidalgo · Accepted Answer · 2014-05-07 07:19:11Z

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 7, 2014 at 7:19

answered Jun 13, 2013 at 10:16

Paulo Fidalgo

22.4k7 gold badges105 silver badges121 bronze badges

4 Comments

Paulo Fidalgo Over a year ago

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

Shanker Paudel Over a year ago

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

Jeromy French Over a year ago

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

Kamlesh Over a year ago

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.

Bhavesh B · Accepted Answer · 2013-12-03 06:35:26Z

27

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

edited Dec 3, 2013 at 6:35

answered Mar 6, 2013 at 9:49

Bhavesh B

1,12112 silver badges25 bronze badges

2 Comments

James Donnelly Over a year ago

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

Jeromy French Over a year ago

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

dtbarne · Accepted Answer · 2015-02-26 20:53:35Z

15

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

answered Feb 26, 2015 at 20:53

dtbarne

8,2505 gold badges47 silver badges49 bronze badges

Comments

Constantin Stan · Accepted Answer · 2014-12-09 15:53:21Z

11

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.

answered Dec 9, 2014 at 15:53

Constantin Stan

1,1359 silver badges13 bronze badges

Comments

Shiva · Accepted Answer · 2015-08-18 07:05:32Z

6

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

edited Aug 18, 2015 at 7:05

Shiva

12.7k2 gold badges74 silver badges91 bronze badges

answered Nov 28, 2013 at 5:32

abhinav

691 silver badge1 bronze badge

1 Comment

Matthew Over a year ago

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]

Misa Lazovic · Accepted Answer · 2015-10-05 10:19:30Z

5

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

edited Oct 5, 2015 at 10:19

Misa Lazovic

2,83110 gold badges34 silver badges39 bronze badges

answered Oct 5, 2015 at 9:50

Siddhartha esunuri

1,1542 gold badges17 silver badges29 bronze badges

Comments

Marko Bajlovic · Accepted Answer · 2015-11-09 00:47:31Z

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 9, 2015 at 0:47

answered Oct 21, 2015 at 15:39

Marko Bajlovic

3235 silver badges12 bronze badges

Comments

Moses Machua · Accepted Answer · 2017-01-04 19:30:40Z

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 4, 2017 at 19:30

Moses Machua

11.6k3 gold badges39 silver badges56 bronze badges

1 Comment

Brian Over a year ago

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

Josh Mouch · Accepted Answer · 2016-01-24 22:37:42Z

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, 2016 at 22:37

Josh Mouch

3,5781 gold badge40 silver badges34 bronze badges

3 Comments

AllInOne Over a year ago

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

Jeromy French Over a year ago

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

Luiz Over a year ago

much better solution

Shiva · Accepted Answer · 2015-05-20 12:26:38Z

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, 2015 at 12:26

Shiva

12.7k2 gold badges74 silver badges91 bronze badges

answered Aug 8, 2013 at 6:37

coder

6563 gold badges8 silver badges22 bronze badges

3 Comments

Suriya Over a year ago

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

Shiva Over a year ago

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

Kamlesh Over a year ago

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.

Ghanshyam Gohel · Accepted Answer · 2015-12-27 12:20:48Z

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>[email protected]</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>

Amay Kulkarni · Accepted Answer · 2016-04-01 10:15:41Z

2

This works for me for a single column

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

answered Apr 1, 2016 at 10:15

Amay Kulkarni

84814 silver badges16 bronze badges

Comments

Pratik Joshi · Accepted Answer · 2015-06-08 05:45:19Z

1

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"

answered Jun 8, 2015 at 5:45

Pratik Joshi

11.7k7 gold badges44 silver badges73 bronze badges

1 Comment

Kamlesh Over a year ago

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.

Mad Physicist · Accepted Answer · 2017-04-12 17:50:40Z

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, 2017 at 17:50

Mad Physicist

116k29 gold badges202 silver badges292 bronze badges

answered Apr 12, 2017 at 17:27

Pushkaraj Bhandari

612 bronze badges

Comments

Zero · Accepted Answer · 2018-11-27 14:21:27Z

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

Nurul Ferdous · Accepted Answer · 2012-12-06 12:18:40Z

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 6, 2012 at 12:18

Nurul Ferdous

1371 silver badge10 bronze badges

1 Comment

Kamlesh Over a year ago

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.

Shiva · Accepted Answer · 2015-08-18 07:46:12Z

0

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": []
  });
});

edited Aug 18, 2015 at 7:46

Shiva

12.7k2 gold badges74 silver badges91 bronze badges

answered Jun 22, 2015 at 8:42

Python

7895 silver badges5 bronze badges

Comments

BumbuKhan · Accepted Answer · 2016-01-17 21:48:14Z

0

Here is the answer !

targets is the column number, it starts from 0

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

answered Jan 17, 2016 at 21:48

BumbuKhan

416 bronze badges

Comments

Urvi_204 · Accepted Answer · 2017-10-17 12:29:47Z

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()
        ];

Rahul · Accepted Answer · 2016-04-06 11:29:00Z

-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 6, 2016 at 11:29

Rahul

464 bronze badges

Collectives™ on Stack Overflow

Disable sorting for a particular column in jQuery DataTables

23 Answers 23

6 Comments

3 Comments

2 Comments

4 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

3 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

23 Answers 23

6 Comments

3 Comments

2 Comments

4 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

3 Comments

3 Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Linked

Related