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.

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;
		}
	} );
} )
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";
		}
	} );
} )
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 ) {
			/* 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
			} );
		}
	} );
} );