DataTables server-side processing example

# Preamble

There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. Basically all of the paging, filtering, sorting etc that DataTables does can be handed off to a server (or any other data source - Google Gears or Adobe Air for example!) and DataTables is just an events and display module.

The example here shows a very simple display of the CSS data (used in all my other examples), but in this instance coming from the server on each draw. Filtering, multi-column sorting etc all work as you would expect.

# 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

    $(document).ready(function() {
    	$('#example').dataTable( {
    		"bProcessing": true,
    		"bServerSide": true,
    		"sAjaxSource": "scripts/server_processing.php"
    	} );
    } );

# Server side (PHP) code

    <?php
    	/*
    	 * Script:    DataTables server-side script for PHP and MySQL
    	 * Copyright: 2010 - Allan Jardine
    	 * License:   GPL v2 or BSD (3-point)
    	 */

    	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    	 * Easy set variables
    	 */

    	/* Array of database columns which should be read and sent back to DataTables. Use a space where
    	 * you want to insert a non-database field (for example a counter or static image)
    	 */
    	$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );

    	/* Indexed column (used for fast and accurate table cardinality) */
    	$sIndexColumn = "id";

    	/* DB table to use */
    	$sTable = "ajax";

    	/* Database connection information */
    	$gaSql['user']       = "";
    	$gaSql['password']   = "";
    	$gaSql['db']         = "";
    	$gaSql['server']     = "localhost";

    	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
    	 * If you just want to use the basic configuration for DataTables with PHP server-side, there is
    	 * no need to edit below this line
    	 */

    	/*
    	 * MySQL connection
    	 */
    	$gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
    		die( 'Could not open connection to server' );

    	mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
    		die( 'Could not select database '. $gaSql['db'] );

    	/*
    	 * Paging
    	 */
    	$sLimit = "";
    	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
    	{
    		$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
    			mysql_real_escape_string( $_GET['iDisplayLength'] );
    	}

    	/*
    	 * Ordering
    	 */
    	if ( isset( $_GET['iSortCol_0'] ) )
    	{
    		$sOrder = "ORDER BY  ";
    		for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
    		{
    			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
    			{
    				$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
    				 	".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
    			}
    		}

    		$sOrder = substr_replace( $sOrder, "", -2 );
    		if ( $sOrder == "ORDER BY" )
    		{
    			$sOrder = "";
    		}
    	}

    	/*
    	 * Filtering
    	 * NOTE this does not match the built-in DataTables filtering which does it
    	 * word by word on any field. It's possible to do here, but concerned about efficiency
    	 * on very large tables, and MySQL's regex functionality is very limited
    	 */
    	$sWhere = "";
    	if ( $_GET['sSearch'] != "" )
    	{
    		$sWhere = "WHERE (";
    		for ( $i=0 ; $i<count($aColumns) ; $i++ )
    		{
    			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
    		}
    		$sWhere = substr_replace( $sWhere, "", -3 );
    		$sWhere .= ')';
    	}

    	/* Individual column filtering */
    	for ( $i=0 ; $i<count($aColumns) ; $i++ )
    	{
    		if ( $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
    		{
    			if ( $sWhere == "" )
    			{
    				$sWhere = "WHERE ";
    			}
    			else
    			{
    				$sWhere .= " AND ";
    			}
    			$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
    		}
    	}

    	/*
    	 * SQL queries
    	 * Get data to display
    	 */
    	$sQuery = "
    		SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
    		FROM   $sTable
    		$sWhere
    		$sOrder
    		$sLimit
    	";
    	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());

    	/* Data set length after filtering */
    	$sQuery = "
    		SELECT FOUND_ROWS()
    	";
    	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
    	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
    	$iFilteredTotal = $aResultFilterTotal[0];

    	/* Total data set length */
    	$sQuery = "
    		SELECT COUNT(".$sIndexColumn.")
    		FROM   $sTable
    	";
    	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
    	$aResultTotal = mysql_fetch_array($rResultTotal);
    	$iTotal = $aResultTotal[0];

    	/*
    	 * Output
    	 */
    	$output = array(
    		"sEcho" => intval($_GET['sEcho']),
    		"iTotalRecords" => $iTotal,
    		"iTotalDisplayRecords" => $iFilteredTotal,
    		"aaData" => array()
    	);

    	while ( $aRow = mysql_fetch_array( $rResult ) )
    	{
    		$row = array();
    		for ( $i=0 ; $i<count($aColumns) ; $i++ )
    		{
    			if ( $aColumns[$i] == "version" )
    			{
    				/* Special output formatting for 'version' column */
    				$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
    			}
    			else if ( $aColumns[$i] != ' ' )
    			{
    				/* General output */
    				$row[] = $aRow[ $aColumns[$i] ];
    			}
    		}
    		$output['aaData'][] = $row;
    	}

    	echo json_encode( $output );
    ?>

# Other examples

## Basic initialisation

- Zero configuration
- Feature enablement
- Sorting data
- Multi-column sorting
- Multiple tables
- Hidden columns
- Complex headers - grouping with colspan
- DOM positioning
- State saving
- Alternative pagination styles
- Scrolling:
  Horizontal / Vertical / Both / Themed / Infinite
- Change language information (internationalisation)
- ThemeRoller themes (Smoothness)

## Advanced initialisation

- Events:
  Live events / Pre-init / Post-init with fnGetNodes
- Column rendering
- Sorting without HTML tags
- Multiple table controls (sDom)
- Defining length menu options
- Complex headers and hidden columns
- Custom toolbar (element) around table
- Row highlighting with CSS
- Row grouping
- Row callback
- Footer callback
- Control sorting direction of columns
- Change language information from a file (internationalisation)

## 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

## Data sources

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

## Server-side processing

- Obtain server-side data
- Add extra HTTP variables
- Use HTTP POST
- Automatic addition of IDs and classes to rows
- Reading table data from objects
- Show and hide details about a particular record
- User selectable rows (multiple rows)
- JSONP for a cross domain data source
- jEditable integration with DataTables
- Deferred loading of Ajax data
- Custom column ordering (in callback data)
- Pipelining data (reduce Ajax calls for paging)

## Ajax data source

- Ajax sourced data (array of arrays)
- Ajax sourced data (array of objects)
- Deferred DOM creation for extra speed
- Empty data source columns
- Use a data source other than aaData (the default)
- Read column data from sub-arrays
- Read column data from deeply nested properties

## Plug-ins

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