使用服务器端处理和页码显示列表

Question

目标：
当您按下其中一个页码时，数据应与一个数字一起发送到 URL“https://jsonplaceholder.typicode.com/cmets?postId=”。
您按第 2 页，网址将是“https://jsonplaceholder.typicode.com/cmets?postId=2”，然后您检索数据。

dipslay 列表应始终在表格中显示 4 行，如果列表超过 4 行，请使用页码。

问题：
我试图解决它，但它并不顺利。我缺少哪部分代码？

Jsbin:
jsbin.com/dabusuhuku/edit?html.js,console.output

谢谢！

---

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>


<div class="container">
  <table id="example" class="display" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>
  </table>
</div>


<br/>

<br/>

<br/>
<br/>

---

var pagenumber = 1;

$('#example').DataTable( {
    
  "processing": true, 
  "serverSide": true,
  "ajax":{
    url:"https://jsonplaceholder.typicode.com/comments?postId=" + pagenumber,
    dataSrc: ""
  },

  "columns": [
    { data: "postId" },
    { data: "id" },
    { data: "name" },
    { data: "email" },
    { data: "body" }
  ]
    
});



var table = $('#example').DataTable();

$('#example').on( 'draw.dt', function () {
  console.log(table.page());
  pagenumber = table.page() + 1;
});

Answer 1

首先，?postId=N 是一个过滤条件，用于获取与特定帖子编号相关的所有 cmets，而不是页面。 如果要获取整个 cmets 数据集的真实分页数据，则需要提供 _page=N 和 _limit=N1。

因此，在您的场景中，具有 4 个 cmets 的第一页将如下所示： https://jsonplaceholder.typicode.com/comments?_page=1&_limit=4

那你需要把页码换成想要的页码。

其次，当您在 ajax.url 属性中设置某些内容时，它始终是一个静态值（一次性设置），即使您提供了一个串联值：

url:"https://jsonplaceholder.typicode.com/cmets?postId="+页码

表示url字符串的值会与第一部分和pagenumber值在开始时组合一次（所以不会反映pagenumber的变化）。

第三，dataTables可以工作在client和serverside两种模式，如果选择serverside，你的server必须支持dataTables用来过滤数据的查询参数：

• 画
• 开始
• 长度
• 搜索
• 列

jsonplaceholder 有它自己的 API 语法，这里描述：https://github.com/typicode/json-server

所以如果你真的想使用这个 API 端点，你必须创建自己的适配器中间件，它将请求/响应从 dataTable 使用的语法转换为 jsonplaceholder 可以理解的语法。