JQuery Datatables服务端分页选中页码重置问题求助

我来帮你分析下问题的根源，然后一步步解决：

问题原因 #

你当前的代码里，每次点击页码都会调用fetchProduct()，而这个函数会重新执行$('#table').DataTable()——这相当于销毁旧的表格实例，重新创建一个新的。新实例默认会回到第1页，这就是为什么分页栏会重置，但因为你API里传了正确的页码，所以数据是对应页的，造成了“数据对但页码不对”的矛盾。

而且，当开启serverSide: true时，DataTables本身就会自动处理分页、排序、搜索的ajax请求，完全不需要你手动监听page.dt事件再调用刷新函数，这属于画蛇添足，反而破坏了表格的状态管理。

具体解决方案 #

1. 重构表格初始化逻辑，保存实例避免重复初始化

把表格实例保存到变量中，第一次初始化后，后续只需要刷新数据而不是重新创建表格：

// 在合适的作用域（比如全局或模块内）保存表格实例
let productTable;

function fetchProduct() {
  // 如果表格已经初始化，只刷新数据，不重新创建
  if (productTable) {
    productTable.ajax.reload();
    return;
  }

  // 第一次初始化表格
  productTable = $('#table').DataTable({
    "serverSide": true,
    "ajax": {
      // 动态构建API地址，DataTables会自动传递分页相关参数（start, length等）
      url: function(data) {
        // start是当前页的起始数据索引，length是每页行数，计算当前页码
        const currentPage = (data.start / data.length) + 1;
        const rowsPerPage = data.length;
        // 替换成你的实际API地址，把分页参数传进去
        return `你的API地址?page=${currentPage}&rows=${rowsPerPage}`;
      },
      dataType: "json",
      dataFilter: function(data) {
        var json = jQuery.parseJSON(data);
        // 把后端返回的总记录数赋值给DataTables需要的字段
        json.recordsTotal = json.totalRecords;
        json.recordsFiltered = json.totalRecords;
        json.data = json.products;
        return JSON.stringify(json);
      },
    },
    "columns": [
      { "data": "product.productType" },
      { "data": "product.displayName" },
      { "data": "product.id" },
      { "data": "product.brandName" }
    ]
  });
}

2. 移除手动的页码点击事件监听

删掉这段代码，因为DataTables会自动处理分页请求：

// 删掉这段！！！
$('#table').on('page.dt', function() {
  var info = table.page.info();
  var currentPageNo = info.page+1;
  fetchProduct();
});

3. 可选：优化后端返回格式（推荐）

如果可以修改后端接口，让它直接返回DataTables要求的标准格式：

{
  "draw": 1, // 前端传递的draw参数，原样返回即可
  "recordsTotal": 100, // 总记录数
  "recordsFiltered": 100, // 过滤后的记录数（服务端分页时和recordsTotal一致）
  "data": [/* 你的products数组 */]
}

这样前端可以去掉dataFilter，简化ajax配置：

"ajax": {
  url: function(data) {
    const currentPage = (data.start / data.length) + 1;
    const rowsPerPage = data.length;
    return `你的API地址?page=${currentPage}&rows=${rowsPerPage}`;
  },
  dataType: "json",
  dataSrc: "data" // 直接指定数据来源是返回的data字段
},

为什么这样能解决问题？ #

• 表格实例只创建一次，分页状态会被DataTables自动维护，不会因为重新初始化而丢失
• 利用DataTables内置的服务端分页逻辑，自动在分页时传递正确的参数到后端，不需要手动干预
• ajax.reload()方法会保留当前的分页、排序、搜索状态，刷新数据时不会重置页码

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