DataTables服务器端模式下pageLength设为5不生效问题求助

DataTables 单页默认显示10条数据，但我的表格却直接显示了全部14条。我想设置单页显示5条，让14条数据分页展示，试过设置max:5没用，也在代码里配置了pageLength:5、lengthMenu，甚至加了data-page-length属性，都没解决问题。相关代码如下：

var select_server_table = $("#select_server_table_example").DataTable({
    processing: true,
    lengthChange: false,
    serverSide: true,
    pageLength : 5,
    lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'Todos']],
    ajax: {
        url: "http://192.168.03.30:8000/api/ipc/all",   // fake api
        type: "GET",    
        // dataType : 'json',
        contentType : 'application/json', 
        data: function(d) {
            d.search = d.search.value
            console.log(d)
            return JSON.stringify(d)
        },
        headers: {
            Authorization: "Bearer " + getToken,
        },
        dataSrc: function (response) {
            console.log("DATA", response);
            return response.ipcs;
        }
    },

    columns: [
        { data: "device_id", title: "device_id" },
        { data: "name", title: "name" },
        { data: "group", title: "group" },
    ],

    error:  function(response){
        console.log("ERROR",response);
    }
});

select_server_table.draw();

解决办法 #

你开启了serverSide: true（服务端模式），这时候前端的分页设置只是给服务端传参数，真正的分页逻辑完全由服务端控制，前端说了不算，这是核心问题。

• 先检查服务端接口处理逻辑
  DataTables会给服务端传两个关键分页参数：

  • start：当前页的起始数据下标（比如第1页是0，第2页是5）
  • length：每页要返回的条数（就是你设置的5）
    服务端必须读取这两个参数，只返回对应范围内的数据，不能一次性把14条都返回。

• 再确认服务端返回的数据格式
  服务端返回的JSON必须包含三个部分：

  1. recordsTotal：总数据条数（这里是14）
  2. recordsFiltered：过滤后的总条数（没做搜索过滤的话和recordsTotal一样）
  3. 你的数据集ipcs（当前页的5条数据）
     比如正确的返回格式应该是：

  {
    "recordsTotal": 14,
    "recordsFiltered": 14,
    "ipcs": [/* 5条数据 */]
  }
  

  如果没返回前两个字段，DataTables会以为所有数据都在当前页，自然就全显示出来了。

• 前端代码的小修正
  你用的是GET请求，但把参数转成了JSON字符串，GET请求不需要这么做，服务端可能解析不了。可以改成下面这样：

  ajax: {
      url: "http://192.168.03.30:8000/api/ipc/all",
      type: "GET",
      headers: {
          Authorization: "Bearer " + getToken,
      },
      data: function(d) {
          // 直接返回键值对，不用转JSON
          return {
              search: d.search.value,
              start: d.start,
              length: d.length
          };
      },
      dataSrc: function (response) {
          console.log("DATA", response);
          return response.ipcs;
      }
  }
  

  同时删掉contentType : 'application/json'，GET请求不需要这个请求头。

内容的提问来源于stack exchange，提问作者code_freshgirl