如何使用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 next或previous button.How自定义参数(此处为页面)以让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"
    },
  ]
}

每次我点击“下一步”按钮，“number.Should”参数将返回当前页面的绘制，我必须将其添加到服务器响应中？或者我应该在“下一步”或“上一步”按钮上定制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" }
            ]
        } );
    });