DataTables logo DataTables

Please note that this site is currently undergoing maintenance to update the documentation for the 1.10.0 DataTables release.
There might be the odd breakage for a short period of time. Apologies for any inconvenience caused.
Additionally, the forums will be unavailable from 6am GMT 1st April for approximately 3 hours

Server-side data rendering functions

The formatting that DataTables requires for server-side processing is well defined but very specific to DataTables. There will be times when you wish to use data from a source which does not reply with this required formatting. In these situations you can use fnServerData to convert from one format to another. This page shows functions which have been written for specific data sources, ready for your use.

How to use DataTables server-side data rendering functions

To use the server-side data rendering functions available below, you simply need to include the code from the plug-in, in the fnServerData parameter of the DataTables initialisation. This function will then run whenever data is requested from the server, translating the data format from that which is returned by the server, into that needed by DataTables. The example below shows the general code set-up for this (live example of fnServerData being used):

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('#example').dataTable( {
			"bProcessing": true,
			"bServerSide": true,
			"sAjaxSource": "../examples_support/server_processing.php",
			"fnServerData": ... /* Include function source from plug-in */
		} );
	} );
</script>

Server-side data rendering functions

OpenSearch
Show details
OpenSearch is a data format which allows web-sites and search engines to publish search results in an open manner. This function allows you to integrate an open search application using DataTables for the display of the returned data. Note that OpenSearch does not support filtering at this time, so filtering in DataTables should be disabled.
Author: Garry Boyce
Code:
"fnServerData": function ( sSource, aoData, fnCallback ) {
	/* Add query parameters here */


	var simpleMap = {};
	for ( var i=0 ; i<aoData.length ; i++ )
	{
		var entry = aoData[i];
		simpleMap[entry.name] = entry.value;
	}
	var sEcho = simpleMap["sEcho"];

	aoData = {
		 "query":$(document).getUrlParam("keywords")
		,"hitsPerPage":simpleMap["iDisplayLength"]
		,"start":simpleMap["iDisplayStart"]
	};

	$.ajax( {
		"dataType": 'xml', 
		"type": "GET", 
		"url": sSource, 
		"data": aoData, 
		"success": function (data,textStatus,xmlHttpRequest) {
			/* convert to format that DataTables understands */				
			var jData = $( data );
			var json = {"sEcho": sEcho,"aaData" : []};
			
			// since no filtering as in FAQ these 2 should be equal
			json.iTotalRecords = jData.find("[nodeName=opensearch:totalResults]").text();
			json.iTotalDisplayRecords = json.iTotalRecords;
			
			var items = jData.find("item").each(function(){
				json.aaData.push([
					$(this).find("title").text(),
					$(this).find("description").text(),
					$(this).find("[nodeName=nutch:msllmeta]").text()
				]);
			});
			
			fnCallback(json);
		}
	} );
}
JSON object
Show details
This server-side method will take a flat Javascript object and convert it into the 2D array needed by DataTables for display. To use you simply give it an array of the object parameters you want to be shown in the table.
Author: Allan Jardine
Code:
fnServerObjectToArray = function ( aElements )
{
	return function ( sSource, aoData, fnCallback ) {
		$.ajax( {
			"dataType": 'json', 
			"type": "POST", 
			"url": sSource, 
			"data": aoData, 
			"success": function (json) {
				var a = [];
				for ( var i=0, iLen=json.aaData.length ; i<iLen ; i++ ) {
					var inner = [];
					for ( var j=0, jLen=aElements.length ; j<jLen ; j++ ) {
						inner.push( json.aaData[i][aElements[j]] );
					}
					a.push( inner );
				}
				json.aaData = a;
				fnCallback(json);
			}
		} );
	}
}

$(document).ready(function() {
	$('#example').dataTable( {
		"bProcessing": true,
		"sAjaxSource": '../examples_support/json_source_object.txt',
		"fnServerData": fnServerObjectToArray( [ 'engine', 'browser', 'platform', 'version', 'grade' ] )
	} );
} );

Note that all contributed code is copyright to the original author, unless otherwise stated.