DataTables server-side processing example with hidden row information

Preamble

This example shows how you might modify the client-side show/hide details rows example for use with DataTables 1.5's server-side processing option.

Live example

Rendering engine Browser Platform(s) Engine version CSS grade
Loading data from server
Rendering engine Browser Platform(s) Engine version CSS grade

Initialisation code

var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
	var aData = oTable.fnGetData( nTr );
	var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
	sOut += '<tr><td>Rendering engine:</td><td>'+aData[2]+' '+aData[5]+'</td></tr>';
	sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
	sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
	sOut += '</table>';
	
	return sOut;
}

/* Event handler function */
function fnOpenClose ( oSettings )
{
	$('td img', oTable.fnGetNodes() ).each( function () {
		$(this).click( function () {
			var nTr = this.parentNode.parentNode;
			if ( this.src.match('details_close') )
			{
				/* This row is already open - close it */
				this.src = "../examples_support/details_open.png";
				oTable.fnClose( nTr );
			}
			else
			{
				/* Open this row */
				this.src = "../examples_support/details_close.png";
				oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
			}
		} );
	} );
}

$(document).ready(function() {
	oTable = $('#example').dataTable( {
		"bProcessing": true,
		"bServerSide": true,
		"sAjaxSource": "../examples_support/server_processing_details_col.php",
		"aoColumns": [
			{ "sClass": "center", "bSortable": false },
			null,
			null,
			null,
			{ "sClass": "center" },
			{ "sClass": "center" }
		],
		"aaSorting": [[1, 'asc']],
		"fnDrawCallback": fnOpenClose
	} );
} );

Other examples

Basic initialisation

Advanced initialisation

Data sources

Server-side processing

API

Plug-ins

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