8

I'm working with jQuery DataTables and server-side processing mode. But I'm facing an issue with data table, I've search every thing in Datatables documentation but couldn't find my answer.

So the problem is I'm getting response from server as JSON like this:

JSON response

As you can see in this JSON response, datatables required JSON is in data.data to set this data source in datatables there is a property which is Custom Data Property and it working fine and shows the rows. Now problem is that datatables is not considering pagination parameters from JSON which is why it show's this:

Pagination

Please note that I cannot change JSON response from server side.

Update: Here is js call script:

$(document).ready(function () {
   $("#example").dataTable({
      "ajax": {
          url: app.getApiUrlWithAccessToken('lead/get_all'),
          dataSrc: function(json){
              return json.data.data;
          }
      },
      "lengthMenu": [1,2,5,10,15],
      "columns": [
          { "data": "first_name" },
          { "data": "last_name" },
          { "data": "title" },
          { "data": "email" },
          { "data": "city" },
          { "data": "status" }
      ],
      "processing": true,
      "serverSide": true
   });
});
9
  • Seem your request filter the response, show your request and show/explain also the command you can use for a list response
    – ScaisEdge
    Oct 5, 2015 at 6:25
  • @scaisEdge i've updated the question. Oct 5, 2015 at 8:04
  • which version you are using ?
    – J Santosh
    Oct 5, 2015 at 8:10
  • datatables expects iTotalRecords and iTotalDisplayRecords from server to display the message showing 0 to 10 of 100 records. Docs
    – J Santosh
    Oct 5, 2015 at 8:13
  • @JSantosh i'm using DataTables-1.10.9, i've change the iTotalRecords,iTotalDisplayRecords but nothing happens. Oct 5, 2015 at 8:18

1 Answer 1

12

CAUSE

In server-side processing mode DataTables expects certain structure in returned data. Parameters draw, recordsTotal and recordsFiltered should be top-level properties. You response has these parameters as sub-properties of data, not where DataTables would be looking for them.

SOLUTION

Set parameters draw, recordsTotal and recordsFiltered as top-level properties of JSON response where DataTables expects them to be.

Use the following code for ajax.dataSrc option:

dataSrc: function(json){
   json.draw = json.data.draw;
   json.recordsTotal = json.data.recordsTotal;
   json.recordsFiltered = json.data.recordsFiltered;

   return json.data.data;
}

DEMO

See this jsFiddle for code and demonstration.

2
  • @TouqeerShafi, you're right, I've corrected my answer. Oct 5, 2015 at 11:49
  • seems the new version is like this dataFilter: function(data){ var json = jQuery.parseJSON( data ); json.recordsTotal = json.total; json.recordsFiltered = json.total; json.data = json.list; return JSON.stringify( json ); // return JSON string } Aug 26, 2020 at 11:05

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.