DataTables

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

Purchase

Download

Support

Preamble

DataTables presents a number of useful API functions to the calling code which can be used to manipulate the table data as required. But there are times when DataTables doesn't provide the API function that you want - so for this DataTables allows a method by which custom API functions can be defined (effectively a plug-in). This is done by adding functions the $.fn.dataTableExt.oApi object, which will be registered by DataTables. Each function is passed a single parameter, the settings object for the table in question.

In the example below, I present an API function which is used to obtain all of the TR rows which are currently not on display (useful for building a form from the table).

Live example

Initialisation code

/*
 * Function: fnGetHiddenTrNodes
 * Purpose:  Get all of the hidden TR nodes (i.e. the ones which aren't on display)
 * Returns:  array:
 * Inputs:   object:oSettings - DataTables settings object
 */
$.fn.dataTableExt.oApi.fnGetHiddenTrNodes = function ( oSettings )
{
	/* Note the use of a DataTables 'private' function thought the 'oApi' object */
	var anNodes = this.oApi._fnGetTrNodes( oSettings );
	var anDisplay = $('tbody tr', oSettings.nTable);
	
	/* Remove nodes which are being displayed */
	for ( var i=0 ; i<anDisplay.length ; i++ )
	{
		var iIndex = jQuery.inArray( anDisplay[i], anNodes );
		if ( iIndex != -1 )
		{
			anNodes.splice( iIndex, 1 );
		}
	}
	
	/* Fire back the array to the caller */
	return anNodes;
}

/* Init the table and fire off a call to get the hidden nodes. */
var oTable;
$(document).ready(function() {
	var oTable = $('#example').dataTable();
	
	$('#button').click( function () {
		var nHidden = oTable.fnGetHiddenTrNodes();
		alert( nHidden.length +' nodes were returned' );
	} );
} );

Other examples