Question

I am using the https://datatables.net/ jQuery plugin to display client side tabular data.

The data for my table is pre-sorted so I don't want the overhead of dataTables doing the first sort. I have set aaSorting to [] so that dataTables does not sort the data.

My problem is that I would like the header style to show which column the data is sorted by and when that column is sorted for it to toggle the sort order.

I tried a cheat of the following which displays the way I want but I have to click twice to change the search to descending.

dataTableOptions.fnInitComplete = function (oSettings, json) {
    $table.find('th:first').addClass('sorting_asc');
};

Any suggestions would be greatly appreciated.

Thanks.

Was it helpful?

Solution

You can set the default sort direction of your target column to 'desc' by using asSort as documented here. This would sort your table in descending order on the first click. You would still to set the class of th:first to sorting_asc on init.

// Using aoColumns
$(document).ready( function() {
  $('#example').dataTable( {
    "aaSorting": [],
    "aoColumns": [
      { "asSorting": [ "desc", "asc" ] }, // assumes you are targeting column 1
      ...// other columns
    ],
    ...// other configuration
  } );
} );
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top