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 v1.2.0

Options

AutoFill is a nice little feature on it's own, but to make it useful you will want to make use of the initialisation options, particularly callback functions, so you know when something has happened.

Initialisation

Initialisation of AutoFill is done by creating a new instance of the $.fn.dataTable.AutoFill class, which takes two parameters:

Options

complete
Show details 		Function which is called when the auto fill is complete. This might be useful for saving data to a server for example.
Default: null
Input parameters:
  1. array objects - An array of objects with the parameters: 'td' node changed, 'newValue' the new string set, and 'oldValue' the old string that was read.
Return parameter: void
Code example: 
$(document).ready(function() {
	var table = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( table, {
		complete: function ( edited ) {
			alert( 'Edited '+aoEdited.length+' cells');
		}
	} );
} );
mode
Show details 		Mode for dragging (restrict to y-axis only, x-axis only, either one or none). The value can be x, y, either or both.
Default: y
Type: string
Code example: 
$(document).ready(function() {
	var table = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( table, {
		mode: 'x'
	} );
} );

Column options

AutoFill's column options can take two forms: aoColumnDefs or aColumns (or both if you prefer!) just like in DataTables. Like in DataTables aoColumnDefs must have an aTargets array to specify which columns the definition should be applied to.

bEnable or enable Why two names?
Show details 		Enable AutoFill on this column or not. If disabled then the icon which provides the user interaction for the auto fill will not be shown for this column.
Default: true
Type: Boolean
Code example: 
/* camelCase notation */
$(document).ready(function() {
	var table = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( table, {
		"columnDefs": [ 
			{ "enable": false, "targets": [ 0 ] }
		]
	} );
} );

/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumnDefs": [ 
			{ "bEnable": false, "aTargets": [ 0 ] }
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumns": [ 
			{ "bEnable": false },
			null,
			null,
			null,
			null
		] } );
} );
fnRead or read Why two names?
Show details 		Function used to read a value from a given TD cell. This can be used to manipulate input elements, for example, or any given markup rather than using the default AutoFill reading.
Default: null
Input parameters:
  1. Node - TD cell to read the data from
Return parameter: String - read information
Code example: 
/* Using camelCase notation */
$(document).ready(function() {
	var table = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( table, {
		"columnDefs": [ 
			{
				"read": function ( cell ) {
					return $('span', cell).attr('title');
				},
				"targets": [ 0 ]
			}
		] } );
} );

/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumnDefs": [ 
			{
				"fnRead": function ( nTd ) {
					return $('span', nTd).attr('title');
				},
				"aTargets": [ 0 ]
			}
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumns": [ 
			{
				"fnRead": function ( nTd ) {
					return $('span', nTd).attr('title');
				}
			},
			null,
			null,
			null,
			null
		] } );
} );
fnStep or step Why two names?
Show details 		This callback provides the ability to customise the incrementing of data during the auto fill. It's relation to fnRead and fnWrite is that this function is called in-between the two (i.e. the sequence is read, calculate, write - loop). The code example shows a non-incrementing implementation (i.e. for integers when autofilling the string will not be changed).
Default: null
Input parameters:
  1. node - TD cell in question
  2. string - Cell value from read() function
  3. string - Value of the previous cell
  4. integer - Loop counter
  5. integer - Cell x-position in the current auto-fill. The starting cell is coordinate 0 regardless of its physical position in the DataTable.
  6. integer - Cell y-position in the current auto-fill. The starting cell is coordinate 0 regardless of its physical position in the DataTable.
Return parameter: string - calculated value
Code example: 
/* camelCase notation */
$(document).ready(function() {
	var table = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( table, {
		"columnDefs": [ 
			{
				"step": function ( cell, read, last, i, x, y ) {
					// simple increment by 10
					return last === undefined ? read : last+10;
				},
				"targets": [ 0 ]
			}
		] } );
} );

/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumnDefs": [ 
			{
				"fnStep": function ( cell, read, last, i, x, y ) {
					// simple increment by 10
					return last === undefined ? read : last+10;
				},
				"aTargets": [ 0 ]
			}
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumns": [ 
			{
				"fnStep": function ( cell, read, last, i, x, y ) {
					// simple increment by 10
					return last === undefined ? read : last+10;
				}
			},
			null,
			null,
			null,
			null
		] } );
} );
fnWrite or write Why two names?
Show details 		This callback is the corollary of fnRead, providing a method to customise how AutoFill writes a calculated fill value to a given cell. By default AutoFill will set the value in an input or select element in a cell if found, otherwise it will set the value as HTML.
Default: null
Input parameters:
  1. node - TD cell to write a value to.
  2. value - the value to write to the cell.
  3. boolean - indicator to note if this is the last cell to be updated in the current group or not (can be useful for only requiring a DataTables redraw on the last update to speed things up).
Return parameter: void
Code example: 
/* camelCase notation */
$(document).ready(function() {
	var table = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( table, {
		"aoColumnDefs": [ 
			{
				"write": function ( cell, val ) {
					return $('span', cell).attr('title', val );
				},
				"targets": [ 0 ]
			}
		] } );
} );

/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumnDefs": [ 
			{
				"fnWrite": function ( nTd, sValue ) {
					return $('span', nTd).attr('title', sValue );
				},
				"aTargets": [ 0 ]
			}
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new $.fn.dataTable.AutoFill( oTable, {
		"aoColumns": [ 
			{
				"fnWrite": function ( nTd, sValue ) {
					return $('span', nTd).attr('title', sValue );
				}
			},
			null,
			null,
			null,
			null
		] } );
} );