DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

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

Initialisation code

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

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

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

/* 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