disable a column sorting using 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.

Answer 1

"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(,)

Answer 2

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>[e-mail]</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>

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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