DataTables logo DataTables

via Ad Packs

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.

AutoFill's options work entirely on the columns in the table and 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.

Initialisation

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

AutoFill options

bEnable
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: 
/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumnDefs": [ 
			{ "bEnable": false, "aTargets": [ 0 ] }
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumns": [ 
			{ "bEnable": false },
			null,
			null,
			null,
			null
		] } );
} );
fnCallback
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: 
/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumnDefs": [ 
			{
				"fnComplete": function ( aoEdited ) {
					alert( 'Edited '+aoEdited.length+' cells');
				},
				"aTargets": [ 0 ]
			}
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumns": [ 
			{
				"fnStep": function ( nTd, oPrepped, iDiff, bIncrement, sToken ) {
					alert( 'Edited '+aoEdited.length+' cells');
				}
			},
			null,
			null,
			null,
			null
		] } );
} );
fnRead
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 aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumnDefs": [ 
			{
				"fnRead": function ( nTd ) {
					return $('span', nTd).attr('title');
				},
				"aTargets": [ 0 ]
			}
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumns": [ 
			{
				"fnRead": function ( nTd ) {
					return $('span', nTd).attr('title');
				}
			},
			null,
			null,
			null,
			null
		] } );
} );
fnStep
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. object - object which contains prepared information about the string to be altered. This object has three parameters: 'iStart' which is an integer, the integer found in the string, or '0' if none found - 'sStr' the original string to be auto filled. It might modified by inserting a token (given by the 5th parameter passed to fnStep) where the decimal point would be, to allow integer calculations - 'sPostFix' the floating point part.
  3. integer - step difference from the start point in the cells
  4. boolean - increment (true) or decrement (false)
  5. string - rplacement token for prepared information
Return parameter: string - calculated value
Code example: 
/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumnDefs": [ 
			{
				"fnStep": function ( nTd, oPrepped, iDiff, bIncrement, sToken ) {
					return oPrepped.sStr.replace( sToken, '.' );
				},
				"aTargets": [ 0 ]
			}
		] } );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumns": [ 
			{
				"fnStep": function ( nTd, oPrepped, iDiff, bIncrement, sToken ) {
					return oPrepped.sStr.replace( sToken, '.' );
				}
			},
			null,
			null,
			null,
			null
		] } );
} );
fnWrite
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: 
/* Using aoColumnDefs */
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumnDefs": [ 
			{
				"fnWrite": function ( nTd, sValue, bList ) {
					return $('span', nTd).attr('title', sValue );
				},
				"aTargets": [ 0 ]
			}
		] } );
} );

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