Live DOM ordering

This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during its initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.

The example below shows the first column as normal text with ordering as you would expect. The following columns all have a form input element of different kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.

This is a fairly simple example, but you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit yourself. You could also update the ordering live as a user enters data into a form by using an event handler calling order() or draw() methods.

Name	Age	Position	Office
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Berry
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Jennifer Chang
Brenden Wagner
Fiona Green
Shou Itou
Michelle House
Suki Burks
Prescott Bartlett
Gavin Cortez
Martena Mccray
Unity Butler
Howard Hatfield
Hope Fuentes
Vivian Harrell
Timothy Mooney
Jackson Bradshaw
Olivia Liang
Bruno Nash
Sakura Yamamoto
Thor Walton
Finn Camacho
Serge Baldwin
Zenaida Frank
Zorita Serrano
Jennifer Acosta
Cara Stevens
Hermione Butler
Lael Greer
Jonas Alexander
Shad Decker
Michael Bruce
Donna Snider
Name	Age	Position	Office

Javascript
HTML
CSS
Ajax
Server-side script
Comments

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

// Create an array with the values of all the input boxes in a column
DataTable.ext.order['dom-text'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			return $('input', td).val();
		});
};

// Create an array with the values of all the input boxes in a column, parsed as numbers
DataTable.ext.order['dom-text-numeric'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			return $('input', td).val() * 1;
		});
};

// Create an array with the values of all the select options in a column
DataTable.ext.order['dom-select'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			return $('select', td).val();
		});
};

// Create an array with the values of all the checkboxes in a column
DataTable.ext.order['dom-checkbox'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			return $('input', td).prop('checked') ? '1' : '0';
		});
};

// Initialise the table with the required column ordering data types
$('#example').DataTable({
	columns: [
		null,
		{ orderDataType: 'dom-text-numeric' },
		{ orderDataType: 'dom-text', type: 'string' },
		{ orderDataType: 'dom-select' }
	]
});

// Create an array with the values of all the input boxes in a column
DataTable.ext.order['dom-text'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			let el = td.querySelector('input');
			return el ? el.value : 0;
		});
};

// Create an array with the values of all the input boxes in a column, parsed as numbers
DataTable.ext.order['dom-text-numeric'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			let el = td.querySelector('input');
			return el ? el.value * 1 : 0;
		});
};

// Create an array with the values of all the select options in a column
DataTable.ext.order['dom-select'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			let el = td.querySelector('select');
			return el ? el.value : 0;
		});
};

// Create an array with the values of all the checkboxes in a column
DataTable.ext.order['dom-checkbox'] = function (settings, col) {
	return this.api()
		.column(col, { order: 'index' })
		.nodes()
		.map(function (td, i) {
			let el = td.querySelector('input');
			return el ? (el.checked ? 1 : 0) : 0;
		});
};

// Initialise the table with the required column ordering data types
new DataTable('#example', {
	columns: [
		null,
		{ orderDataType: 'dom-text-numeric' },
		{ orderDataType: 'dom-text', type: 'string' },
		{ orderDataType: 'dom-select' }
	]
});

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.

Live DOM ordering

Other examples

Basic initialisation

Advanced initialisation

Data sources

Language and Internationalisation

DateTime

Plug-ins

Styling

Layout

API

Ajax

Server-side

DataTables