Default secondary sort

By : Samo

I need to setup multi column sorting on a table of account transactions. I've decided to go with jQuery DataTables. Whenever I click a column header to sort that column (say column x), I want it to sort by column 3 for any matches in column x. If I click column 3, then it should sort by column 0 when there are matches in column 3.

I've seen fnSortListener and fnSort, and it looks like I could accomplish my goal by attaching these to each column... but that seems really redundant, since every column needs to do its secondary sort on column 3, except for column 3.

So, is there a way to tell DataTables to always do a secondary sort on column 3 and then specify the exception for column 3?

Any help is appreciated. I'm very new to this plugin. Thanks!


Here's what I wound up going with. The first 2D array indicates how to sort on first click, and the second 2d array indicates how to sort on second click.

var Sorter = function($dataTable) {
  return {
    bindMultiSort: function(headerSelector, firstOrderTuples, secondOrderTuples) {
      var order = 0;
      this.removeSorting(headerSelector).click(function() {
        if (order === 0) {
          order = 1;
        } else {
          order = 0;

    removeSorting: function(headerSelector) {
      var $header = $(headerSelector);

      return $header;

  function attachSecondarySorting($transactionsTable) {
      var sorter = new Sorter($transactionsTable);
      sorter.bindMultiSort('#posted', [[POSTED_DATE_COL, "asc"], [DESCRIPTION_COL, "asc"]], [[POSTED_DATE_COL, "desc"], [DESCRIPTION_COL, "asc"]]);
      sorter.bindMultiSort('#received', [[RECEIVED_DATE_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[RECEIVED_DATE_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);
      sorter.bindMultiSort('#category', [[TRANSACTION_TYPE_COL, 'asc'], [POSTED_DATE_COL, 'desc'], [DESCRIPTION_COL, 'asc']], [[TRANSACTION_TYPE_COL, 'desc'],
      sorter.bindMultiSort('#description', [[DESCRIPTION_COL, 'asc'], [POSTED_DATE_COL, 'desc']], [[DESCRIPTION_COL, 'desc'], [POSTED_DATE_COL, 'desc']]);    
      sorter.bindMultiSort('#moneyIn', [[MONEY_IN_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[MONEY_IN_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);
      sorter.bindMultiSort('#moneyOut', [[MONEY_OUT_COL, 'asc'], [DESCRIPTION_COL, 'asc']], [[MONEY_OUT_COL, 'desc'], [DESCRIPTION_COL, 'asc']]);      
By : Samo


While I think you can accomplish what you're trying to do with a combination of the aDataSort and asSorting column properties, they do have their redundancies and may not provide quite the control you need.

The least redundant solution is going to be one that's similar to the following code:

var theDataTable = $('#tableId').dataTable();  // with whatever options needed, of course

// unbind the default click event that is in place for sorting
// and replace it with your own calls to fnSort
$('#tableId thead th').unbind('click').click(function(){
    var aaSorting = oTable.fnSettings().aaSorting;
    var currentSortColumnIndex = aaSorting[0][0];
    var currentSortDirection = aaSorting[0][1];
    var clickedSortColumnIndex = $(this).index();

    var newSortDirection = 'asc';
    if(currentSortColumnIndex == clickedSortColumnIndex) {
        newSortDirection = (currentSortDirection == 'asc') ? 'desc' : 'asc';

    if(clickedSortColumnIndex == 3) {
        oTable.fnSort( [ [3, newSortDirection], [0, newSortDirection] ] );
    else {
        oTable.fnSort( [ [clickedSortColumnIndex, newSortDirection], [3, newSortDirection] ] );

If I interpreted your sorting intent properly, then this should do the trick, but if not, I think this will get you most of the way to the solution you need.

Note: see also the forum discussion on titled "Sorting on multiple columns"

By : jimmym715

This video can help you solving your question :)
By: admin