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;
    }

    $(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']],
    	} );

    	$('#example tbody td img').live( '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' );
    		}
    	} );
    } );

# Other examples

## Basic initialisation

- Zero configuration
- Feature enablement
- Sorting data
- Multi-column sorting
- Multiple tables
- Hidden columns
- DOM positioning
- State saving
- Alternative pagination styles
- Scrolling: Horizontal / Vertical / Both / Themed / Infinite
- 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)
- Defining length menu options
- Custom toolbar (element) around table
- Row highlighting with CSS
- 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 (using "input" elements)
- Individual column filtering (using "select" elements)
- 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
- API function use in initialisation object (callback)
- DataTables scrolling and tabs
- Regular expression filtering

## Plug-ins

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

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