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

Question

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

dipslay 列表应始终在 table 中显示 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是一个过滤条件，获取与特定post号相关的所有评论，而不是一个页。如果你想获得整个评论数据集的真实分页数据，你需要提供 _page=N 和 _limit=N1.

因此在您的场景中，包含 4 条评论的第一页将如下所示： https://jsonplaceholder.typicode.com/comments?_page=1&_limit=4

然后您需要将页码与您想要的页码交换。

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

url:"https://jsonplaceholder.typicode.com/comments?postId=" + pagenumber

这意味着 url 字符串值将由第一部分和开头的页码值组成一次（因此不会反映页码的更改）。

第三，dataTables可以工作在客户端和服务器端两种模式，如果你选择服务器端，你的服务器必须支持dataTables用于过滤数据的查询参数：

平局
开始
长度
搜索
列

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

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

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

Display the list by using server side processing and pagenumber

javascript

jquery

datatables

datatables-1.10