如何在Datatables中使用服务器端get api实现分页答案

【问题标题】：How to implement pagination with serverside get api in Datatables如何在Datatables中使用服务器端get api实现分页
【发布时间】：2018-07-29 19:01:42
【问题描述】：

我有一个带有服务器端分页的get api，

http://demo.example.com?offset=0&limit=10

我如何在数据表中实现。我在下面尝试但没有成功

  $('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": function ( json ) {
      for ( var i=0, ien=json.length ; i<ien ; i++ ) {
        json[i][0] = '<a href="/message/'+json[i][0]+'>Next Page</a>';
      }
      return json;
    }
  }
} );

【问题讨论】：

serverSide": 是的，你添加了这个吗？
是的，我这样做了，但是如何用下一个或上一个更改偏移值？
理想情况下，您应该在对象中存储 pagenumber/pagesize，然后在单击上一个/下一个时使用它们
谢谢我明白你的意思，但我怎么能用 Datatables 来实现呢？
让我看看能不能得到一个例子。

标签： jquery datatable jquery-plugins datatables

【解决方案1】：

终于有时间实现一个服务器端分页示例。

下面是它的完整示例。请注意我们提供给 API 调用的输入。你可以看看这个ajax: function ( data, callback, settings )，它是主键，我们从那里得到正确的页码和页面大小。

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Jquery Datatable Example</title>
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.0/bootstrap-table.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css'>
      <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    </table>

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js'></script>
<script>
$(document).ready(function () {

    var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';

    var table = $('#example').DataTable({
        dom: "Bfrtip",
        paging: true,
        pageLength: 5,
        ajax: function ( data, callback, settings ) {

            $.ajax({
                url: 'http://localhost:64506/api/values',
                // dataType: 'text',
                type: 'post',
                contentType: 'application/x-www-form-urlencoded',
                data: {
                    RecordsStart: data.start,
                    PageSize: data.length
                },
                success: function( data, textStatus, jQxhr ){
                    callback({
                        // draw: data.draw,
                        data: data.Data,
                        recordsTotal:  data.TotalRecords,
                        recordsFiltered:  data.RecordsFiltered
                    });
                },
                error: function( jqXhr, textStatus, errorThrown ){
                }
            });
        },
        serverSide: true,
        columns: [
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ]

    });

});
</script>
</body>

</html>

在上面的例子中，我们正在集成一个 api，它返回一个以下格式的 JSON。

在下面的格式中，请注意属性“TotalRecords”、“RecordsFiltered”。数据表需要这些来重新计算分页内容并显示适当的页数。

{
   "Data":[
      {
         "first_name":"FirstName 5",
         "last_name":"LastName 5",
         "position":null,
         "office":"start date 5",
         "start_date":"office 5",
         "salary":50
      },
      {
         "first_name":"FirstName 6",
         "last_name":"LastName 6",
         "position":null,
         "office":"start date 6",
         "start_date":"office 6",
         "salary":60
      },
      {
         "first_name":"FirstName 7",
         "last_name":"LastName 7",
         "position":null,
         "office":"start date 7",
         "start_date":"office 7",
         "salary":70
      },
      {
         "first_name":"FirstName 8",
         "last_name":"LastName 8",
         "position":null,
         "office":"start date 8",
         "start_date":"office 8",
         "salary":80
      },
      {
         "first_name":"FirstName 9",
         "last_name":"LastName 9",
         "position":null,
         "office":"start date 9",
         "start_date":"office 9",
         "salary":90
      }
   ],
   "TotalRecords":100,
   "RecordsFiltered":100
}

【讨论】：

哈哈，你让我吃惊，我没想到会有答案！但像魅力一样工作
我已经使用了这个答案，除了搜索栏外一切正常。它只是搜索第一页。分页在服务器端，我使用 ajax 获取每个页面的数据。你能帮我解决这个问题吗？
在 ajax 调用中，传递你的搜索参数并在服务器端过滤它对你有用。