DataTables logo DataTables

Callbacks

During your use and integration of DataTables into your own software, there might be times when you wish to know when a certain event has occurred, allowing you to take appropriate action for that event. This might include modifying a table row/cell, or simply updating an information display every time the table is redrawn.

fnCookieCallback
Show details 		Customise the cookie and / or the parameters being stored when using DataTables with state saving enabled. This function is called whenever the cookie is modified, and it expects a fully formed cookie string to be returned. Note that the data object passed in is a Javascript object which must be converted to a string (JSON.stringify for example).
Default: null
Input parameters:
  1. string: Name of the cookie defined by DataTables
  2. object: Data to be stored in the cookie
  3. string: Cookie expires string
  4. string: Path of the cookie to set
Return parameter: string: cookie formatted string
Code example: 
$(document).ready( function () {
	$('#example').dataTable( {
		"fnCookieCallback": function (sName, oData, sExpires, sPath) {
			/* Customise oData or sName or whatever else here */
			return sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;
		}
	} );
} );
fnDrawCallback
Show details 		This function is called on every 'draw' event, and allows you to dynamically modify any aspect you want about the created DOM.
Default: void
Input parameters: void
Return parameter: void
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"fnDrawCallback": function() {
			alert( 'DataTables has redrawn the table' );
		}
	} );
} )
fnFooterCallback
Show details 		Identical to fnHeaderCallback() but for the table footer this function allows you to modify the table footer on every 'draw' even.
Default: void
Input parameters:
  1. node : "TR" element for the footer
  2. array array strings : Full table data (as derived from the original HTML)
  3. int : Index for the current display starting point in the display array<
  4. int : Index for the current display ending point in the display array
  5. array int : Index array to translate the visual position to the full data array
Return parameter: void
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"fnFooterCallback": function( nFoot, aasData, iStart, iEnd, aiDisplay ) {
			nFoot.getElementsByTagName('th')[0].innerHTML = "Starting index is "+iStart;
		}
	} );
} )
fnFormatNumber
Show details 		When rendering large numbers in the information element for the table (i.e. "Showing 1 to 10 of 57 entries") DataTables will render large numbers to have a comma separator for the 'thousands' units (e.g. 1 million is rendered as "1,000,000") to help readability for the end user. This function will override the default method DataTables uses.
Default: Function (see code)
Input parameters:
  1. int : number to be formatted
Return parameter: String : formatted string for DataTables to show the number
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"fnFormatNumber": function ( iIn ) {
			if ( iIn < 1000 ) {
				return iIn;
			} else {
				var s=(iIn+""), a=s.split(""), out="", iLen=s.length;
				for ( var i=0 ; i
fnHeaderCallback
Show details 		This function is called on every 'draw' event, and allows you to dynamically modify the header row. This can be used to calculate and display useful information about the table.
Default: void
Input parameters:
  1. node : "TR" element for the header
  2. array array strings : Full table data (as derived from the original HTML)
  3. int : Index for the current display starting point in the display array
  4. int : Index for the current display ending point in the display array
  5. array int : Index array to translate the visual position to the full data array
Return parameter: void
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"fnHeaderCallback": function( nHead, aasData, iStart, iEnd, aiDisplay ) {
			nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";
		}
	} );
} )
fnInfoCallback
Show details 		The information element can be used to convey information about the current state of the table. Although the internationalisation options presented by DataTables are quite capable of dealing with most customisations, there may be times where you wish to customise the string further. This callback allows you to do exactly that.
Default: null
Input parameters:
  1. object: DataTables settings object
  2. int: Starting position in data for the draw
  3. int: End position in data for the draw
  4. int: Total number of rows in the table (regardless of filtering)
  5. int: Total number of rows in the data set, after filtering
  6. string: The string that DataTables has formatted using it's own rules
Return parameter: string: The string to be displayed in the information element.
Code example: 
$('#example').dataTable( {
	"fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {
		return iStart +" to "+ iEnd;
	}
} );
fnInitComplete
Show details 		Called when the table has been initialised. Normally DataTables will initialise sequentially and there will be no need for this function, however, this does not hold true when using external language information since that is obtained using an async XHR call.
Default: void
Input parameters:
  1. object:oSettings - DataTables settings object
Return parameter: void
Code example: 
$(document).ready( function() {
	$('#example').dataTable( {
		"fnInitComplete": function() {
			alert( 'DataTables has finished it\'s initialisation.' );
		}
	} );
} )
fnRowCallback
Show details 		This function allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered on screen. This function might be used for setting the row class name etc.
Default: void
Input parameters:
  1. node : "TR" element for the current row
  2. array strings : Raw data array for this row (as derived from the original HTML)
  3. int : The display index for the current table draw
  4. int : The index of the data in the full list of rows (after filtering)
Return parameter: node : "TR" element for the current row
Code example: 
$(document).ready(function() {
	$('#example').dataTable( {
		"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
			/* Bold the grade for all 'A' grade browsers */
			if ( aData[4] == "A" )
			{
				$('td:eq(4)', nRow).html( 'A' );
			}
			return nRow;
		}
	} );
} );
fnServerData
Show details 		This parameter allows you to override the default function which obtains the data from the server ($.getJSON) so something more suitable for your application. For example you could post process the data from the server, or as in the example below, add a parameter to send to the server. Note that fnServerData can be used for either Ajax sourced data or Server-side processing.
Default: $.getJSON
Input parameters:
  1. string: HTTP source to obtain the data from (i.e. sAjaxSource)
  2. array objects: A key/value pair object containing the data to send to the server
  3. function: Function to be called on completion of the data get process that will draw the data on the page.
Return parameter: void
Code example: 
/* POST data to server */
$(document).ready(function() {
	$('#example').dataTable( {
		"sAjaxSource": "data_source.php",
		"fnServerData": function ( sSource, aoData, fnCallback ) {
			/* Add some data to send to the source, and send as 'POST' */
			aoData.push( { "name": "my_field", "value": "my_value" } );
			$.ajax( {
				"dataType": 'json', 
				"type": "POST", 
				"url": sSource, 
				"data": aoData, 
				"success": fnCallback
			} );
		}
	} );
} );