DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

Preamble

AutoFill provides a number of customisable callback functions so you can tailor it's actions to exactly what you need. This specific example shows fnCallback, which is fired when the mouse is released. Further documentation is below.

• fnRead - Called when a cell is read for it's value. This allows you to override the default of reading the HTML value (or 'input' elements value if there is one present). For example reading the value from a select list.
  • Parameter 1: Node - TD element to be read from
  • Returns: String - read value
• fnWrite - Called when a cell is to read to. This allows you to write in a specific format, or perhaps to an element within the cell.
  • Parameter 1: Node - TD element to be written to
  • Parameter 2: String - Value to write
  • Parameter 3: Boolean - Last cell to be written (useful for speeding up DataTables' fnUpdate)
  • Returns: void
• fnStep - Called to calculate the new value to give to a cell
  • Parameter 1: Node - TD element to be written to
  • Parameter 2: String - Statement with a token to be replace with the calculated value
  • Parameter 3: Int - Step counter
  • Parameter 4: Boolean - increment (true), or decrement (false)
  • Parameter 5: String - Token to replace
  • Returns: String - string to write into the cell
• fnCallback - Called when the AutoFill is complete, with information about the fill. This can be useful for updating a server database for example.
  • Parameter 1: Array - An array of objects with information about each cell that was written to. Object parameters are: "td", "newValue" and "oldValue".
  • Returns: void

Live example

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

$(document).ready( function () {
	var oTable = $('#example').dataTable();
	new AutoFill( oTable, {
		"aoColumnDefs": [ {
			"fnCallback": function ( ao ) {
				var n = document.getElementById('output');
				for ( var i=0, iLen=ao.length ; i<iLen ; i++ ) {
					n.innerHTML += "Update: old value: {"+
						ao[i].oldValue+"} - new value: {"+ao[i].newValue+"}<br>";
				}
				n.scrollTop = n.scrollHeight;
			},
			"aTargets": [ "_all" ]
		} ]
	} );
} );