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

Show 102550100 entries

Search:

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

Showing 1 to 10 of 57 entries

PreviousNext

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