DataTables logo DataTables

DataTables live DOM sorting example

Preamble

This example shows how you can use information available in the DOM to sort columns. Typically DataTables will read information to be sorted during it's initialisation phase, and this will not be updated based on user interaction, so sorting 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 sort on, just prior to the sort. This method is much more efficient than actually sorting using the DOM, since only one DOM query is needed for each cell to be sorted.

The example below shows the first two columns as normal text with sorting 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 sort on, based on the value at the time of the sort.

This is a fairly simple example, but it 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 sorting live as a user in entered data into a form using an event handler calling fnSort() or fnDraw().

Live example

Rendering engine Browser Platform(s) Engine version CSS grade Check
Trident Internet Explorer 4.0
Trident Internet Explorer 5.0
Trident Internet Explorer 5.5
Trident Internet Explorer 6
Trident Internet Explorer 7
Trident AOL browser (AOL desktop)
Gecko Firefox 1.0
Gecko Firefox 1.5
Gecko Firefox 2.0
Gecko Firefox 3.0
Gecko Camino 1.0
Gecko Camino 1.5
Gecko Netscape 7.2
Gecko Netscape Browser 8
Gecko Netscape Navigator 9
Gecko Mozilla 1.0
Gecko Mozilla 1.1
Gecko Mozilla 1.2
Gecko Mozilla 1.3
Gecko Mozilla 1.4
Gecko Mozilla 1.5
Gecko Mozilla 1.6
Gecko Mozilla 1.7
Gecko Mozilla 1.8
Gecko Seamonkey 1.1
Gecko Epiphany 2.20
Webkit Safari 1.2
Webkit Safari 1.3
Webkit Safari 2.0
Webkit Safari 3.0
Webkit OmniWeb 5.5
Webkit iPod Touch / iPhone
Webkit S60
Presto Opera 7.0
Presto Opera 7.5
Presto Opera 8.0
Presto Opera 8.5
Presto Opera 9.0
Presto Opera 9.2
Presto Opera 9.5
Presto Opera for Wii
Presto Nokia N800
Presto Nintendo DS browser
KHTML Konqureror 3.1
KHTML Konqureror 3.3
KHTML Konqureror 3.5
Tasman Internet Explorer 4.5
Tasman Internet Explorer 5.1
Tasman Internet Explorer 5.2
Misc NetFront 3.1
Misc NetFront 3.4
Misc Dillo 0.8
Misc Links
Misc Lynx
Misc IE Mobile
Misc PSP browser
Other browsers All others
Rendering engine Browser Platform(s) Engine version CSS grade Check

Initialisation code

/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
{
	return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
		return $('td:eq('+iColumn+') input', tr).val();
	} );
}

/* Create an array with the values of all the select options in a column */
$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn )
{
	return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
		return $('td:eq('+iColumn+') select', tr).val();
	} );
}

/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
{
	return $.map( oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
		return $('td:eq('+iColumn+') input', tr).prop('checked') ? '1' : '0';
	} );
}

/* Initialise the table with the required column sorting data types */
$(document).ready(function() {
	$('#example').dataTable( {
		"aoColumns": [
			null,
			null,
			{ "sSortDataType": "dom-text" },
			{ "sSortDataType": "dom-text", "sType": "numeric" },
			{ "sSortDataType": "dom-select" },
			{ "sSortDataType": "dom-checkbox" }
		]
	} );
} );

Other examples