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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

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

Answer 12

Simply you can use this

"ordering": false,

Full Code:

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