Jquery Datatables return additional information from server

using JQuery Datatables and all is going well.

I've worked out how to send addtional information f开发者_JAVA技巧rom the client to the server. Now, I want to go back the other way.

So, how do I send extra information from the server to the client. I would have thought I could add an extra entry in the returned JSON and pull it out somewhere. One item I'd perhaps like to send back is how long the server took to handle the response. I can then show this information to the user.

Any help would be much appreciated. Thanks

I think you got quite everything right. You just need to attach the additional data server side in the JSON object and then get it in "fnServerData". You can add this code to the inizialization object:

        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.getJSON( sSource, aoData, function (json) {
//Here you can do whatever you want with the additional data
                console.dir(json);
//Call the standard callback to redraw the table
                fnCallback(json);
            } );
        }

Server side you can add as many parameters as you want: Usually you have a json with 3 parameters "iTotalRecords" (total number of rows), "iTotalDisplayRecords" (Filtered total if you are using filters) and aaData (An associative array with the rows). If you add for example "iProcessingTime" (time it took to process server side) You could do:

        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.getJSON( sSource, aoData, function (json) {
//take the processing time and put it in a div
                $('#processingTime').html(json.iProcessingTime);
//pass the data to the standard callback and draw the table
                fnCallback(json);
            } );
        }

Is this what you need?

It is also possible to access the information from the JSON file using the "fnInitComplete" function, which is called after the draw event of the table is completed (including datarows).

  $('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      //Do something with json variable
    }
  });

"fnDrawCallback": function( oSettings ) {
    console.log(oSettings.json);//do whatever with your custom response
  },

@Nicola Peluchetti's answer is right. But if you are following this example http://datatables.net/release-datatables/examples/server_side/post.html and do not (for some reason) want to use getJSON , This works too

        "fnServerData": function ( sSource, aoData, fnCallback ) {
            $.ajax({
                "dataType": 'json',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": function(json){
                    $('#processingTime').html(json.iProcessingTime); // iProcessingTime is the variable that we added in JSON at the server side
                    fnCallback(json);
                }
            });               
        }

The above suggestions didn't help.

I have an ajax server-side, pageable implementation. As the user enters new search words it has to refresh, therefore using "fnInitComplete" is not an option, since it only triggers once, when the DataTable object is initialized.

Overriding fnServerData didn't work either.

So instead I ended implementing it by grabbing the iProcessingTime from JSON via the dataSrc:

var table = $('#pkgTable').DataTable({
    "processing" : true,
      "serverSide" : true,
      "sPaginationType" : "jPaginator",
      "ajax": {
          "url" : urlStr,
          "type" : "POST",
          "dataSrc": function(json) {
            var iProcessingTimeMS = json.iProcessingTime;
            var iProcessingTimeS = iProcessingTimeMS/1000;
            $("#processingTime").html("Search Time: " + iProcessingTimeMS + " ms. " + iProcessingTimeS + " s.");
          return json.aaData;
        }
      },
      "oLanguage": {
            "sProcessing":   "<span style='color: red; font-weight: bold'>Please Wait...</span>",
            "sZeroRecords":  "No Records Found...",
            "sSearch":       "Search All:",
            "sUrl":          "",
            "oPaginate": {
                             "sFirst"    : "<b>&lt;&lt;</b>",
                             "sLast"     : "<b>&gt;&gt;</b>",
                             "sPrevious" : "<b>&lt;</b>",
                             "sNext"     : "<b>&gt;</b>"
                    },
            "sLengthMenu": 'Display <select>' +
                    '<option value="10">10</option>' +
                    '<option value="20">20</option>' +
                    '<option value="50">50</option>' +
                    '<option value="100">100</option>' +
                    '</select> records'
        }
});

<div id="category"></div>

$('#example').dataTable( {
    "fnInitComplete": function(oSettings, json) {
      $('#category').html(json.category);
    }
  });

This seems to work fine for me.