DataTables allows sorting by multiple columns at the same time, which can be activated in a number of different ways:
dataSort option.sorting option to specify a multiple column sort by default (for
example [ [0,'asc'], [1,'asc'] ]).order() API method.Note that, the ability for the user to shift click to sort multiple columns can be disabled through
the sortMulti option.
The example below shows the first column having a secondary sort 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.
| First name | Last name | Position | Office | Salary |
|---|---|---|---|---|
| Tiger | Nixon | System Architect | Edinburgh | $3,120 |
| Garrett | Winters | Director | Edinburgh | $5,300 |
| Ashton | Cox | Technical Author | San Francisco | $4,800 |
| Cedric | Kelly | Javascript Developer | Edinburgh | $3,600 |
| Jenna | Elliott | Financial Controller | Edinburgh | $5,300 |
| Brielle | Williamson | Integration Specialist | New York | $4,525 |
| Herrod | Chandler | Sales Assistant | San Francisco | $4,080 |
| Rhona | Davidson | Integration Specialist | Edinburgh | $6,730 |
| Colleen | Hurst | Javascript Developer | San Francisco | $5,000 |
| Sonya | Frost | Software Engineer | Edinburgh | $3,600 |
| Jena | Gaines | System Architect | London | $5,000 |
| Quinn | Flynn | Financial Controller | Edinburgh | $4,200 |
| Charde | Marshall | Regional Director | San Francisco | $5,300 |
| Haley | Kennedy | Senior Marketing Designer | London | $4,800 |
| Tatyana | Fitzpatrick | Regional Director | London | $2,875 |
| Michael | Silva | Senior Marketing Designer | London | $3,750 |
| Paul | Byrd | Javascript Developer | New York | $5,000 |
| Gloria | Little | Systems Administrator | New York | $3,120 |
| Bradley | Greer | Software Engineer | London | $3,120 |
| Dai | Rios | System Architect | Edinburgh | $4,200 |
| Jenette | Caldwell | Financial Controller | New York | $4,965 |
| Yuri | Berry | System Architect | New York | $3,600 |
| Caesar | Vance | Technical Author | New York | $4,965 |
| Doris | Wilder | Sales Assistant | Edinburgh | $4,965 |
| Angelica | Ramos | System Architect | London | $2,875 |
| Gavin | Joyce | Developer | Edinburgh | $4,525 |
| Jennifer | Chang | Regional Director | London | $4,080 |
| Brenden | Wagner | Software Engineer | San Francisco | $3,750 |
| Ebony | Grimes | Software Engineer | San Francisco | $2,875 |
| Russell | Chavez | Director | Edinburgh | $3,600 |
| Michelle | House | Integration Specialist | Edinburgh | $3,750 |
| Suki | Burks | Developer | London | $2,875 |
| Prescott | Bartlett | Technical Author | London | $6,730 |
| Gavin | Cortez | Technical Author | San Francisco | $6,730 |
| Martena | Mccray | Integration Specialist | Edinburgh | $4,080 |
| Unity | Butler | Senior Marketing Designer | San Francisco | $3,750 |
| Howard | Hatfield | Financial Controller | San Francisco | $4,080 |
| Hope | Fuentes | Financial Controller | San Francisco | $4,200 |
| Vivian | Harrell | System Architect | San Francisco | $4,965 |
| Timothy | Mooney | Financial Controller | London | $4,200 |
| Jackson | Bradshaw | Director | New York | $5,000 |
| Miriam | Weiss | Support Engineer | Edinburgh | $4,965 |
| Bruno | Nash | Software Engineer | London | $4,200 |
| Odessa | Jackson | Support Engineer | Edinburgh | $3,600 |
| Thor | Walton | Developer | New York | $3,600 |
| Finn | Camacho | Support Engineer | San Francisco | $4,800 |
| Elton | Baldwin | Data Coordinator | Edinburgh | $6,730 |
| Zenaida | Frank | Software Engineer | New York | $4,800 |
| Zorita | Serrano | Software Engineer | San Francisco | $5,300 |
| Jennifer | Acosta | Javascript Developer | Edinburgh | $2,875 |
| Cara | Stevens | Sales Assistant | New York | $4,800 |
| Hermione | Butler | Director | London | $4,080 |
| Lael | Greer | Systems Administrator | London | $3,120 |
| Jonas | Alexander | Developer | San Francisco | $5,300 |
| Shad | Decker | Regional Director | Edinburgh | $5,300 |
| Michael | Bruce | Javascript Developer | Edinburgh | $4,080 |
| Donna | Snider | System Architect | New York | $3,120 |
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
$('#example').dataTable( {
columnDefs: [ {
targets: [ 0 ],
dataSort: [ 0, 1 ]
}, {
targets: [ 1 ],
dataSort: [ 1, 0 ]
}, {
targets: [ 4 ],
dataSort: [ 4, 0 ]
} ]
} );
} );
In addition to the above code, the following Javascript library files are loaded for use in this example:
The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:
The following CSS library files are loaded for use in this example to provide the styling of the table:
This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.