Disable sorting for a particular column in jQuery DataTables
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.
This is what you're looking for:
$('#example').dataTable( {
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 1 ] }
]
});
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&d=identicon&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&d=identicon&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/.
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