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

Click to get hidden rows

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

Basic initialisation

• Zero configuration
• Feature enablement
• Sorting data
• Multi-column sorting
• Multiple tables
• Hidden columns
• DOM positioning
• State saving
• Alternative pagination styles
• Change language information (internationalisation)
• ThemeRoller themes (Smoothness)

Advanced initialisation

• Events (pre initialisation)
• Events (post initialisation)
• Column rendering
• Sorting without HTML tags
• Multiple table controls (sDom)
• Custom toolbar (element) around table
• Set sorting controls
• Column grouping through col/row spans
• Row grouping
• Row callback
• Footer callback
• Change language information from a file (internationalisation)

Data sources

• DOM
• Javascript array
• Ajax source
• Server side processing

Server-side processing

• Obtain server-side data
• Add extra HTTP variables
• Use HTTP POST
• Custom column ordering (in callback data)
• Pipelining data (reduce Ajax calls for paging)
• Show and hide details about a particular record
• User selectable rows (multiple rows)

API

• Dynamically add a new row
• Individual column filtering
• Highlight rows and columns
• Show and hide details about a particular record
• User selectable rows (multiple rows)
• User selectable rows (single row) and delete rows
• Editable rows (with jEditable)
• Submit form with elements in table
• Index column (static number column)
• Show and hide columns dynamically
• Regular expression filtering

Plug-ins

• Add custom API functions
• Sorting and type detection
• Custom pagination controls
• Range filtering / custom filtering
• Live DOM sorting

Please refer to the DataTables documentation for full information about its API properties and methods.