Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

DataTables Set Default sorting column and set unsortable columns

Is it possible to set the default column to sort once the page loads? I want to use the one datatable call for different tables across my site. Is it possible to add a th class to achieve this?

I also want to disable sorting on some columns and since i'm looking for the one datatables call to do everything, is there a class i can add to the th that will make it unsortable?

This is my called dataTable script

if (jQuery().dataTable) {     $('#table-list-items').dataTable({         "fnDrawCallback" : function () {         },         "aLengthMenu": [         [10, 15, 25, 50, 100, -1],         [10, 15, 25, 50, 100, "All"]         ],         "iDisplayLength": 25,         "oLanguage": {             "sLengthMenu": "_MENU_ Records per page",             "sInfo": "_START_ - _END_ of _TOTAL_",             "sInfoEmpty": "0 - 0 of 0",             "oPaginate": {                 "sPrevious": "Prev",                 "sNext": "Next"             }         },         "aoColumnDefs": [{             'bSortable': true,             'aTargets': [0]         }]     }); } 
like image 412
Pierce McGeough Avatar asked Nov 28 '13 10:11

Pierce McGeough


People also ask

How do I sort a specific column in a DataTable?

The existing answers are using legacy DataTables syntax. Versions 1.10+ should use the following syntax: $('table'). dataTable({ "pageLength": -1, //display all records "order": [[ 0, "desc" ]] // Sort by first column descending });

How do I sort DataTables in multiple columns?

As you would expect with a desktop application, DataTables allows you to sort by multiple columns at the same time. This multiple sorting mechanism is always active if the bSort initialiser is true (it is by default) and the end user can activate it by 'shift' clicking on the column they want to add to the sort.

How do you make a sorting false in DataTable?

Use columnDefs option to remove sorting from a column. Pass column index in targets within [] (Indexing starting from 0) and set orderable to false .


2 Answers

As per the table sorting docs you can do that using the order option:

$('.table-asc0').dataTable({   order: [[0, 'asc']] }) 

The 0 indicates to sort on the first column, while asc to do it in ascending order. You can chose any other column and use desc too.


For DataTables versions prior to 1.10 you should use aaSorting instead

$('.table-asc0').dataTable({   aaSorting: [[0, 'asc']] }) 

To order descending on the first column:

$('.table-asc1').dataTable({   aaSorting: [[1, 'desc']] }) 
like image 143
Preview Avatar answered Sep 21 '22 09:09

Preview


SET INITIAL ORDER (DataTables 1.10)

Use order to set initial order of the table.

For example, to sort by second column in descending order:

$('#example').dataTable({    "order": [[ 1, 'desc' ]] }); 

See this jsFiddle for code and demonstration.


DISABLE SORTING FOR A COLUMN (DataTables 1.10)

Use columnDefs and orderable to disable sorting on certain columns.

For example, to disable sorting on third and forth columns:

$('#example').dataTable({    "columnDefs": [       { "targets": [2,3], "orderable": false }   ] }); 

See this jsFiddle for code and demonstration.


SET INITIAL ORDER AND DISABLE SORTING FOR THE SAME COLUMN (DataTables 1.10)

You can combine order option to set initial order of the table and orderable to disable sorting on the same column.

For example:

$('#example').dataTable({    "order": [[ 0, 'desc' ]],    "columnDefs": [       { "targets": [0], "orderable": false }   ] }); 

See this jsFiddle for code and demonstration.

like image 44
Gyrocode.com Avatar answered Sep 19 '22 09:09

Gyrocode.com