How to remove sorting option from DataTables?

问题:

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?

回答1:

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

回答2:

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

回答3:

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.

回答4:

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

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

回答5:

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

回答6:

There are 2 things I can think of that you can try.

First, try setting "bSort" to false. Note that this will disable sorting all around, so there is no need to disable it on individual columns.

$('#jTable').dataTable({ "bSort" : false } );

Second, try setting aaSorting to empty. Note that this would be good to try if you still want to allow some other column(s) to be sortable.

$('#jTable').dataTable({ "aaSorting" : [[]] });

Let us know if either works for you. Hope it helps,

Kashif Solangi

回答7:

You can e.g. set style="display:none;" to the arrow element. You can set it programmatically using JavaScript or you can use CSS class. Firstly you have to examine the HTML code (the arrow element) using some developer console like FireBug.

回答8:

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