Jquery Datatables return additional information from server

Question

using JQuery Datatables and all is going well.

I've worked out how to send addtional information from 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

Audient

Hey Lee, im working on how to send an additional information from client to server using fnServerData. Can you please help me on it! – Lecialecithin

Answer 1

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?

Hudnall

@nicola: can you please help me with how to send a parameter from the client to the server. Im trying to pass the value of a selected combo-box on my html page to the controller which is my AjaxSource to my datatable. – Lecialecithin

Answer 2

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
    }
  });

Moss

This is what i was looking for. – Ysabel

Answer 3

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

Commeasure

this is exactly what i need - the above suggestions do not work for me. what i needed was just a callback to process additional data fetched from the server without affecting ajax function of datatables. – Outsize

Answer 4

@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);
                }
            });               
        }

Pemberton

Answer 5

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'
        }
});

Sabaean

Answer 6

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

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

This seems to work fine for me.

Pry