jQuery Datatable Pipeline using server side - data not loading

Question

I am working on jQuery datatable and trying to implement pipeline feature using server side processing. (following the code same as suggested in the below jQuery site)

https://datatables.net/examples/server_side/pipeline.html

Actual Scenario

My implementation differs only in the data part where my data is array of objects but as per the reference, the data is ajax sourced..

My Ajax response from REST API ::

{
"status": true,
"data": [{
    "dbid": "xyz",
    "name": "QA Pt",
    "email": "a+123@gmail.com",
    "isactive": true,
    "Datecreated": "2018-06-04",
    "lastmodified": "2018-06-04",
    "newfields": {
        "firstname": "QA",
        "lastname": "Pt",
        "viewonlyadmin": "no",
        "usertype": 0
    },
    "userid": "85097428"
}, {
    "dbid": "xyz",
    "name": "QA Pt",
    "email": "a+123@gmail.com",
    "isactive": true,
    "Datecreated": "2018-06-04",
    "lastmodified": "2018-06-04",
    "newfields": {
        "firstname": "QA",
        "lastname": "Pt",
        "viewonlyadmin": "no",
        "usertype": 0
    },
    "userid": "85097428"
}],
"recordsTotal": 597,
"recordsFiltered": 597,
"draw": 1
}

Pipeline feature and the Pagination part works perfectly but the data in table is always shown as "No matching records found"

When i tried debugging the code, in drawcallback function 'settings' object -> aoData is always empty.

Below is the screenshot of the table.

Scenario 2

The other fix I tried is by passing json.data to drawcallback function instead of drawcallback(json) in ajax success function. In this case, the data is shown in the table but the pagination part is failing. PFB the screenshot.

Any one have idea on why this data is not being applied to the table? Looking for some help on fixing this issue..

score 0 · Answer 1 · answered Sep 23 '18 at 15:57

Assuming you are trying to return json from API as follows.

return Json(new
            {
                // this is what datatables wants sending back
                draw = 1,
                recordsTotal = result.Count(),
                recordsFiltered = 10,
                data = result
            });

Just change this to return Json(result); So your json result looks like

    [{
  "Latitude": 18.00,
  "Longitude": 23.00,
  "Name": "Pune"
}, {
  "Latitude": 14.00,
  "Longitude": 24.00,
  "Name": "Mumbai"
}, {
  "Latitude": 34.004654,
  "Longitude": -4.005465,
  "Name": "Delhi"
}, {
  "Latitude": 23.004564,
  "Longitude": 23.007897,
  "Name": "Jaipur"
}]

Now, in your ajax success, make datatables like this. Reason to use ajax success is it is assumed that you get all the data at one round trip to server.

$.ajax({                    
                url: "Your API Url",
                type: "GET",
                contentType: "application/json; charset=utf-8",
                datatype: JSON,
                success: function (result) {
                    var my_columns = [];
                    $.each(result[0], function (key, value) {
                        var my_item = {};
                        my_item.data = key;
                        my_item.title = key;
                        my_columns.push(my_item);
                    });

                    $('#table1').DataTable({
                        "data": result,
                        "columns": my_columns
                    });
                }
            });

jQuery Datatable Pipeline using server side - data not loading

1 Answers1