ajax - 带有 ajax 的 JQuery 数据表，发布 API 调用挂钩

Question

我正在使用服务器端分页实现 jquery DataTable。请参阅下面的代码片段 -

脚本

$(async function() {
    $('#registry_table').DataTable({
        serverSide: true,
        ajax: {
            url: 'localhost:3000/provenance/registries',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + localStorage.getItem("token")
            },
            data: () => {
               return {page: 0, per_page: 5};
            }
        },
        columns: [
            {data: 'name', defaultContent: 'N/A'},
            {data: 'created', defaultContent: 'N/A'},
            {data: 'extrinsic', defaultContent: 'N/A'},
            {data: 'registry', defaultContent: ' <span class="text-primary bg-white fa-border d-inline-block" style="cursor: pointer" title="Rename Registry"><i class="fas fa-pen-nib"/> Rename</span>'}
        ],
        language: {
            searchPlaceholder: "Search...",
            search: "",
            lengthMenu: "_MENU_ &nbsp;items/page"
        }
    });
});

html

<table class="table table-striped mg-b-0" id="registry_table">
    <thead>
        <tr>
            <th class="text-left">#</th>
            <th class="text-left">Name</th>
            <th class="text-left">Created on</th>
            <th class="text-left">Transaction</th>
            <th class="text-center">Action</th>
        </tr>
    </thead>
</table>

API 响应

{
  "registries": [
    {
      "registry": 489607958,
      "created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
      "name": "test 7",
      "created": "2020-09-14T15:08:49.006766"
    },
    {
      "registry": 1421927575,
      "created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
      "name": "test 6",
      "created": "2020-09-14T15:08:43.104835"
    },
    {
      "registry": 1560576458,
      "created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
      "name": "test 4",
      "created": "2020-09-14T15:08:34.132407"
    },
    {
      "registry": 1766285412,
      "created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
      "name": "test 5",
      "created": "2020-09-14T15:08:27.376323"
    },
    {
      "registry": 155398053,
      "created_by": "5DqdTHZLA8X2Lk2FqCPFM9kxd8GmdMbyboFiFg6gmB8sHCg4",
      "name": "test 3",
      "created": "2020-09-14T15:08:16.768747"
    }
  ],
  "total": 7
}

如果总行数是7并且per_page= 5，那么它应该显示2页。但在浏览器中，它显示了 5 个页面。此外，页面信息显示错误信息。

浏览器

我的问题是——

1. 获取数据后，有没有办法设置页数/总项目数
2. 页面信息应该是Showing 1 to 5 of 7 entries (filtered from 7 total entries)，如何正确设置？
3. 如何将整行作为参数传递给函数（重命名按钮）

注意：API 正在生产中，不太可能更改。

更新1：

脚本（修改数据并添加带有 ajax 部分的 dataSrc

data: (d) => {
    d.page =self.page;
    d.per_page =self.per_page;
    delete d.columns;
    delete d.order;
    delete d.search;
    delete d.start;
    delete d.length;
},
dataSrc: (response) => {
    response.draw = 1;
    response.recordsTotal = response.total;
    response.recordsFiltered = response.registries.length;
    response.data = response.registries;

    return response.data;
}

现在它没有显示任何数据，但其他一切都很好。

标签： ajaxdatatablespagination