DataTables
DataTables 1.9 was End Of Life in 2014. Do not use it for new work.
The current release of DataTables can always be found on DataTables.net.
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.