Understanding fnServerData in Datatables

8
votes

I am trying to use Datatables in my project. I want to understand the use of "fnServerData" callback option. I have gone through the doc Here and have seen following example code -

$(document).ready( function() {
  $('#example').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "xhr.php",
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
      oSettings.jqXHR = $.ajax( {
        "dataType": 'json',
        "type": "POST",
        "url": sSource,
        "data": aoData,
        "success": fnCallback
      } );
    }
  } );
} );

What is "sSource", "aoData" parameters here and how we are supplying values in it? Also, instead of putting a JSP or PHP as a source (sAjaxSource), can we submit a form which will get JSON data dynamically?

1
jqueryjquery-datatables

1 Answers

26
votes

fnServerData is an internal function in dataTables that can be overwritten with your own ajax handler. In this case with a comfortable jQuery function Read more here.

The parameters are defined in dataTables core and are required in this particular order:

1 - sSource is the URL where your datasource is located. It is set at initialization to the value in sAjaxSource. In this case xhr.php

2 - aoData is an array of parameters that will be sent to the datasource. This contains by default paginationinfo, sortinginfo, filterinfo etc. (which are automatically set by the core) to which your dataSource script should react. (For Example: Limit an sql query to pagesize etc.) To send more info to your request you can push other values to aoData. Like so:

"fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
               aoData.push( { "name": "Input1", "value": $("#data1").val() } );
               aoData.push( { "name": "Input2", "value": $("#data2").val() } );
  oSettings.jqXHR = $.ajax( {

(Will get the values of two input fields named data1 and data2 via jQuery from a form and include them in the POST as Input1 and Input2)

If you want to know what's being sent, you can look at the POST Data with Firebugs console, or you can change type to GET. Then you'll see the passed parameters in the address bar (Beware that this can be a very long string which might get cut off).

3 - fnCallback is also a built-in function of the core that can be overwritten, but is not in this case. You should provide your own function in case you want to do some post-processing in JS after the data was received.

Regarding the second part of your question: Of course you don't need to use PHP or JSP. Any server-side language that can serve JSON data dynamically is fine (Python, Node, you name it ...)