DataTables logo DataTables

This site contains the legacy documentation for DataTables v1.9 and earlier for reference only.
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.
AutoFill example with input elements

Preamble

AutoFill works with Input elements and Select elements, as well as plain HTML cells. This example shows all inputs cells, combined with DataTables' DOM sorting plug-in. You can even combine input and plain HTML cells if you wanted (useful from something like jEditable).

Live example

Rendering engine Browser Platform(s) Engine version CSS grade
Rendering engine Browser Platform(s) Engine version CSS grade

Examples

Initialisation code

$.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;
}

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"aoColumnDefs": [
			{ "sSortDataType": "dom-text", "aTargets": [ "_all" ] },
			{ "sType": "numeric", "aTargets": [ -2 ] }
		]
	} );
	new AutoFill( oTable );
} );