<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-form" order="5">

<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />

<title>Live DOM ordering</title>
<js><![CDATA[

/* Create an array with the values of all the input boxes in a column */
$.fn.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 */
$.fn.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 */
$.fn.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 */
$.fn.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 */
$(document).ready(function() {
	$('#example').DataTable( {
		"columns": [
			null,
			{ "orderDataType": "dom-text-numeric" },
			{ "orderDataType": "dom-text", type: 'string' },
			{ "orderDataType": "dom-select" }
		]
	} );
} );

]]></js>

<info><![CDATA[

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 `dt-api order()` or `dt-api draw()` methods.

]]></info>

</dt-example>
