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

• Basic initialisation
• Selecting which columns to provide AutoFill on
• Scrolling a DataTable using fill
• Using with input elements
• Customisation using callback functions

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 );
} );