jquery - 如何使用 jQuery DataTable 设置下一页 url

Question

我的服务器返回数据模式是这样的:

{
    "count": 161,
    "next": "http://127.0.0.1:8000/api/example/?page=3",
    "previous": "http://127.0.0.1:8000/api/example/?page=1",
    "results": [
        {
            "name": "foo",
            "version": "bar",
        }
    ]
}

我这样使用 DataTable:

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/api/example/?page=1"
    } );
} );

如何从 url 更改数据源:

"next": "http://127.0.0.1:8000/api/example/?page=3",

当我点击 DataTable 的下一个或上一个按钮时。如何自定义参数(页面在这里)让 DataTable 知道？

从这里的例子Object data source架构如下:

{
  "draw": 3,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    {
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
  ]
}

每次单击下一步按钮时，“draw”参数都会返回当前页码。我是否必须将其添加到我的服务器响应中？或者我应该在“下一个”或“上一个”按钮上自定义 onclick 事件，使用 ajax 获取数据然后重绘表格？我也在这里看插件Pagination plug-ins , 我应该使用它吗？

Answer 1

这项工作，您可以设置限制和偏移量来处理这个问题。

$(document).ready(function() {
        $('#pirate_table').DataTable( {
            "processing": true,
            "serverSide": true,
            "bPaginate": true,
            "ajax": function(data, callback, settings) {
                    $.get('/api/example/', {
                        limit: data.length,
                        offset: data.start,
                        }, function(res) {
                            callback({
                                recordsTotal: res.count,
                                recordsFiltered: res.count,
                                data: res.results
                            });
                        });
            },
            "columns": [
                { "data": "name" },
                { "data": "version" }
            ]
        } );
    });