DataTables example Multi-column ordering

DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways:

  • User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column).
  • On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the columns.orderDataDT option.
  • Using the columns.orderDataDT option to specify a multiple column order by default (for example [ [0,'asc'], [1,'asc'] ]).
  • Through the order()DT API method.

Note that, the ability for the user to shift click to order multiple columns can be disabled through the orderMultiDT option.

The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied directly to the first and the salary column to the first name column.

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
    $('#example').dataTable( {
        columnDefs: [ {
            targets: [ 0 ],
            orderData: [ 0, 1 ]
        }, {
            targets: [ 1 ],
            orderData: [ 1, 0 ]
        }, {
            targets: [ 4 ],
            orderData: [ 4, 0 ]
        } ]
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: