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.orderData option.
Using the columns.orderData option to specify a multiple column order by default (for example [ 0, 1 ]).
Through the order() API method.

Note that, the ability for the user to shift click to order multiple columns can be disabled through the orderMulti 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.

First name	Last name	Position	Office	Salary
Tiger	Nixon	System Architect	Edinburgh	320800
Garrett	Winters	Accountant	Tokyo	170750
Ashton	Cox	Junior Technical Author	San Francisco	86000
Cedric	Kelly	Senior Javascript Developer	Edinburgh	433060
Airi	Satou	Accountant	Tokyo	162700
Brielle	Williamson	Integration Specialist	New York	372000
Herrod	Chandler	Sales Assistant	San Francisco	137500
Rhona	Davidson	Integration Specialist	Tokyo	327900
Colleen	Hurst	Javascript Developer	San Francisco	205500
Sonya	Frost	Software Engineer	Edinburgh	103600
Jena	Gaines	Office Manager	London	90560
Quinn	Flynn	Support Lead	Edinburgh	342000
Charde	Marshall	Regional Director	San Francisco	470600
Haley	Kennedy	Senior Marketing Designer	London	313500
Tatyana	Fitzpatrick	Regional Director	London	385750
Michael	Silva	Marketing Designer	London	198500
Paul	Byrd	Chief Financial Officer (CFO)	New York	725000
Gloria	Little	Systems Administrator	New York	237500
Bradley	Greer	Software Engineer	London	132000
Dai	Rios	Personnel Lead	Edinburgh	217500
Jenette	Caldwell	Development Lead	New York	345000
Yuri	Berry	Chief Marketing Officer (CMO)	New York	675000
Caesar	Vance	Pre-Sales Support	New York	106450
Doris	Wilder	Sales Assistant	Sydney	85600
Angelica	Ramos	Chief Executive Officer (CEO)	London	1200000
Gavin	Joyce	Developer	Edinburgh	92575
Jennifer	Chang	Regional Director	Singapore	357650
Brenden	Wagner	Software Engineer	San Francisco	206850
Fiona	Green	Chief Operating Officer (COO)	San Francisco	850000
Shou	Itou	Regional Marketing	Tokyo	163000
Michelle	House	Integration Specialist	Sydney	95400
Suki	Burks	Developer	London	114500
Prescott	Bartlett	Technical Author	London	145000
Gavin	Cortez	Team Leader	San Francisco	235500
Martena	Mccray	Post-Sales support	Edinburgh	324050
Unity	Butler	Marketing Designer	San Francisco	85675
Howard	Hatfield	Office Manager	San Francisco	164500
Hope	Fuentes	Secretary	San Francisco	109850
Vivian	Harrell	Financial Controller	San Francisco	452500
Timothy	Mooney	Office Manager	London	136200
Jackson	Bradshaw	Director	New York	645750
Olivia	Liang	Support Engineer	Singapore	234500
Bruno	Nash	Software Engineer	London	163500
Sakura	Yamamoto	Support Engineer	Tokyo	139575
Thor	Walton	Developer	New York	98540
Finn	Camacho	Support Engineer	San Francisco	87500
Serge	Baldwin	Data Coordinator	Singapore	138575
Zenaida	Frank	Software Engineer	New York	125250
Zorita	Serrano	Software Engineer	San Francisco	115000
Jennifer	Acosta	Junior Javascript Developer	Edinburgh	75650
Cara	Stevens	Sales Assistant	New York	145600
Hermione	Butler	Regional Director	London	356250
Lael	Greer	Systems Administrator	London	103500
Jonas	Alexander	Developer	San Francisco	86500
Shad	Decker	Regional Director	Edinburgh	183000
Michael	Bruce	Javascript Developer	Singapore	183000
Donna	Snider	Customer Support	New York	112000

Javascript
HTML
CSS
Ajax
Server-side script
Comments

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

$('#example').DataTable({
	columnDefs: [
		{
			targets: [0],
			orderData: [0, 1]
		},
		{
			targets: [1],
			orderData: [1, 0]
		},
		{
			targets: [4],
			orderData: [4, 0]
		}
	]
});

new DataTable('#example', {
	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:

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.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.

Multi-column ordering

Other examples

Basic initialisation

Advanced initialisation

Data sources

Language and Internationalisation

DateTime

Plug-ins

Styling

Layout

API

Ajax

Server-side

DataTables