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

【问题标题】：jQuery Datatable Pipeline using server side - data not loading使用服务器端的 jQuery Datatable Pipeline - 数据未加载
【发布时间】：2018-11-13 15:01:50
【问题描述】：

我正在研究 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 始终为空。

下面是表格截图。

场景 2

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

有人知道为什么这些数据没有应用于表格吗？寻求解决此问题的帮助..

【问题讨论】：

标签： datatable datatables server-side pipelining

【解决方案1】：

假设您尝试从 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
                    });
                }
            });

【讨论】：