使用webpack构建时Datatable分页按钮未正确发送start参数问题

问题根因 #

开启serverSide: true服务器端分页模式后，要么分页参数未正确传递到后端，要么后端返回的总数字段不符合要求，导致Datatable判定总数据仅为当前页的10条，分页参数不更新。

解决步骤 #

• 调整ajax配置，确保Datatable自动生成的分页参数正常传递
  修改原有ajax配置，新增data回调透传内置参数：

  'ajax': {
    'url': '/someUrl',
    'dataSrc': 'someData',
    'type': 'POST',
    // 新增以下配置
    'data': function (d) {
      return d;
    }
  },
  

  d是Datatable自动生成的参数对象，包含start、length、draw、search等所有服务端分页需要的字段，直接返回即可随请求发送到后端。

• 校验后端返回字段是否符合规范
  服务端必须返回3个必填字段，缺一不可：

  1. draw：必须和本次请求携带的draw参数值完全一致，不可随意自定义
  2. recordsTotal：数据库中符合条件的总数据条数，不是当前页返回的条数
  3. recordsFiltered：经过搜索过滤后的总数据条数，无搜索逻辑时和recordsTotal取值相同
     返回示例：

  {
    "draw": 2,
    "recordsTotal": 125,
    "recordsFiltered": 125,
    "someData": [/* 当前页的10条数据 */]
  }
  

• 排查依赖冲突与配置冲突

  1. 检查webpack打包结果，确认是否存在多版本jQuery/Datatable重复打包的情况，重复实例会导致分页状态无法同步
  2. 旧版本Datatable存在关闭排序后分页参数异常的bug，如果当前配置设置了ordering: false，可临时改为true测试，若参数恢复正常，升级Datatable到最新稳定版即可修复
  3. 可在控制台执行$('#myTable').DataTable().page.info()，点击分页按钮后查看输出的start字段是否变化：如果值变化但请求未携带，是ajax配置问题；如果值未变化，是表格实例初始化异常，可销毁原有实例后重新初始化。

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