jquery - 自定义数据源属性dataSrc和分页问题

Question

我正在使用 jQuery DataTables 和服务器端处理模式。但我遇到了数据表的问题，我搜索了数据表文档中的所有内容，但找不到答案。

所以问题是我从服务器得到 JSON 响应，如下所示:

正如您在此 JSON 响应中所看到的，数据表所需的 JSON 位于 data.data 中，以便在数据表中设置此数据源，其中有一个属性 Custom Data Property它工作正常并显示行。现在的问题是数据表没有考虑来自 JSON 的分页参数，这就是它显示的原因:

请注意，我无法更改服务器端的 JSON 响应。

更新:这是js调用脚本:

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

Answer 1

原因

在服务器端处理模式下，DataTables 期望 certain structure返回的数据中。参数draw、recordsTotal和recordsFiltered应该是顶级属性。您的响应将这些参数作为 data 的子属性，而不是 DataTables 查找它们的位置。

解决方案

将参数 draw、recordsTotal 和 recordsFiltered 设置为 DataTables 期望的 JSON 响应的顶级属性。

使用以下代码 ajax.dataSrc选项:

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

   return json.data.data;
}

演示

参见this jsFiddle用于代码和演示。