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
The code will look like this:
$(".data-cash").each(function (index) {
$(this).dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"bSort": false,
"aaSorting": []
});
});
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/.
Here is what you can use to disable certain column to be disabled:
$('#tableId').dataTable({
"columns": [
{ "data": "id"},
{ "data": "sampleSortableColumn" },
{ "data": "otherSortableColumn" },
{ "data": "unsortableColumn", "orderable": false}
]
});
So all you have to do is add the "orderable": false to the column you don't want to be sortable.
"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(,)
you can also use negative index like this:
$('.datatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ -1 ] }
]
});
You can directry use .notsortable() method on column
vm.dtOpt_product = DTOptionsBuilder.newOptions()
.withOption('responsive', true)
vm.dtOpt_product.withPaginationType('full_numbers');
vm.dtOpt_product.withColumnFilter({
aoColumns: [{
type: 'null'
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'text',
bRegex: true,
bSmart: true
}, {
type: 'select',
bRegex: false,
bSmart: true,
values: vm.dtProductTypes
}]
});
vm.dtColDefs_product = [
DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
];