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
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
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
}]
});
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
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>dummy@email.com</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>
To update Bhavish's answer (which I think is for an older version of DataTables and didn't work for me). I think they changed the attribute name. Try this:
<thead>
<tr>
<td data-sortable="false">Requirements</td>
<td data-sortable="false">Automated</td>
<td>Created On</td>
</tr>
</thead>
<tbody>
<tr>
<td>