How to remove sorting option from DataTables?

Question

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?

Does this answer your question? Disable sorting for a particular column in jQuery DataTables — Jeromy French
– Jeromy French, Commented Aug 24, 2022 at 23:15

Kamlesh · Accepted Answer · 2022-11-11 11:27:53Z

130

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

edited Nov 11, 2022 at 11:27

Kamlesh

6,2591 gold badge51 silver badges55 bronze badges

answered Aug 12, 2016 at 18:01

Ricardo Rivera Nieves

1,4852 gold badges9 silver badges7 bronze badges

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

2 Comments

colidyre Over a year ago

I cannot see in the documentation that ordering must be used globally and that ordering does not disappear if it is set individually to all columns. However, the answer seems to be correct. If I set each column to "ordering": false, then the sort symbol remains on the first column, even if it doesn't work. At least for me (DataTables Version 1.10.20).

Kishor Pawar Over a year ago

I confirm this works in angular 2+ also. dtOptions: DataTables.Settings {ordering: false,}

Kiran Kanzar · Accepted Answer · 2019-07-04 10:11:56Z

31

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

edited Jul 4, 2019 at 10:11

Kiran Kanzar

3291 gold badge5 silver badges14 bronze badges

answered May 2, 2013 at 19:11

Jay Rizzi

4,3046 gold badges45 silver badges73 bronze badges

1 Comment

7urkm3n Over a year ago

Thx for specifying indexes

Julien B. · Accepted Answer · 2020-10-24 15:08:52Z

24

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.

edited Oct 24, 2020 at 15:08

answered Oct 24, 2020 at 15:02

Julien B.

3,3742 gold badges23 silver badges36 bronze badges

1 Comment

Melisa Over a year ago

it works very well for one column instead of all table

tduchateau · Accepted Answer · 2013-05-02 17:57:18Z

17

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

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

answered May 2, 2013 at 17:57

tduchateau

4,5013 gold badges32 silver badges41 bronze badges

2 Comments

Shaida Muhammad Over a year ago

This is what I was searching for. tnx

Obot Ernest Over a year ago

Exactly what i wanted to archieve

Marco · Accepted Answer · 2018-06-28 20:53:47Z

16

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.

answered Jun 28, 2018 at 20:53

Marco

2,9491 gold badge21 silver badges29 bronze badges

2 Comments

Abram Over a year ago

You can even omit the orderable true part and just state which ones to disable sorting on.

Riowaldy Indrawan Over a year ago

This works for me. Just need to put orderable false. Thanks.

Kashif Solangi · Accepted Answer · 2020-10-13 10:11:51Z

9

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

edited Oct 13, 2020 at 10:11

answered Apr 5, 2017 at 3:52

Kashif Solangi

9488 silver badges13 bronze badges

Comments

Volker Stolz · Accepted Answer · 2014-05-26 12:47:14Z

3

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

edited May 26, 2014 at 12:47

Volker Stolz

7,4301 gold badge36 silver badges52 bronze badges

answered May 26, 2014 at 12:19

Arzon Barua

5147 silver badges11 bronze badges

Comments

Anne B · Accepted Answer · 2021-06-21 16:15:04Z

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

Vidhi Patel · Accepted Answer · 2021-07-09 11:08:30Z

0

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

answered Jul 9, 2021 at 11:08

Vidhi Patel

253 bronze badges

Comments

m4n0 · Accepted Answer · 2021-09-25 08:22:14Z

0

Simply you can use this

"ordering": false,

Full Code:

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

edited Sep 25, 2021 at 8:22

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

answered Sep 25, 2021 at 6:42

Ridoy Paul

694 bronze badges

1 Comment

kevinpo Over a year ago

This is a duplicate of the currently highest-voted answer from 2016 by Ricardo Rivera Nieves

Conrad37 · Accepted Answer · 2022-09-30 20:18:27Z

0

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

edited Sep 30, 2022 at 20:18

Conrad37

1751 silver badge18 bronze badges

answered May 2, 2013 at 13:20

ravisolanki07

6473 silver badges13 bronze badges

Comments

kevinpo · Accepted Answer · 2022-10-13 20:50:44Z

0

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

answered Oct 13, 2022 at 20:50

kevinpo

1,99321 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to remove sorting option from DataTables?

12 Answers 12

2 Comments

1 Comment

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

2 Comments

1 Comment

1 Comment

2 Comments

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related