11

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?

madth3
  • 7,275
  • 12
  • 50
  • 74
Saurabh
  • 2,384
  • 6
  • 37
  • 52

1 Answers1

28

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 ...)

U3.1415926
  • 812
  • 12
  • 30
mainguy
  • 8,283
  • 2
  • 31
  • 40
  • 2
    If you are using ASP.NET MVC and your controller action has a parameter of type jQueryDataTableParamModel, take into account that you need to create a child class (a class that extends from jQueryDataTableParamModel) and add a property for each extra field that you send from the client to the server. In this case, you should add two properties: Input1 and Input2. That way, ASP.NET MVC will bind the values automatically. – Francisco Goldenstein Jun 24 '14 at 19:34
  • Thanks for the info. Sadly I don't know a lot about ASP.NET MVC:-( But I'm sure this is helpful! – mainguy Jun 25 '14 at 09:35
  • Great! solved my problem on sending column name instead column index for sorting. – Magno C Jan 14 '15 at 13:16
  • 1
    Hello @mainguy, I checked the documentations of the actual Datatables version, but found no param "fnServerData". I found this in legacy documentation, but no alternative in current versions. Do you know how to do this in the latest versions? Could you please update your answer? – gen Jul 06 '15 at 10:43