使用服务器端的jQuery Datatable Pipeline - 数据未加载

时间:2018-06-04 09:52:19

标签: datatable datatables server-side pipelining

我正在研究jQuery数据表并尝试使用服务器端处理实现管道功能。 (遵循以下jQuery站点中建议的代码)

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

实际情景

我的实现仅在我的数据是对象数组的数据部分有所不同,但根据参考,数据是ajax源代码。

来自REST API的我的Ajax响应::

{
"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
}

管道功能和分页部分完美运行,但表格中的数据始终显示为“找不到匹配的记录

当我尝试调试代码时,在 drawcallback 功能'设置'对象 - > aoData始终为空。

以下是该表的截图。

enter image description here

场景2

我尝试的另一个修复方法是在ajax成功函数中将json.data传递给drawcallback函数而不是drawcallback(json)。在这种情况下,数据显示在表中,但分页部分失败。 PFB截图。

enter image description here

任何人都知道为什么这些数据没有应用到表中?寻求解决此问题的一些帮助..

1 个答案:

答案 0 :(得分:0)

假设您尝试按以下方式从API返回json

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

只需将其更改为return Json(result);,那么您的json结果看起来像

    [{
  "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"
}]

现在,在您的ajax success中,使datatables像这样。使用ajax success的原因是假定您在往返服务器的一次往返中就获得了所有数据。

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