Datatables开启服务端模式后如何忽略分页导出全部数据

你开启了serverSide: true服务端分页模式，此时Datatables客户端仅会存储当前页的展示数据，导出按钮配置的page: 'all'参数仅对客户端分页模式生效，无法拉取到未加载到本地的全量数据，所以仅能导出部分记录。

方案1：客户端临时拉取全量导出（适合数据量<1w的场景） #

需要同时修改前端配置和后端接口逻辑：

• 前端修改导出按钮配置，点击导出时临时调整分页参数拉取全量数据，导出完成后恢复原有分页设置：

// 以csv按钮为例，其他导出按钮可复用相同逻辑
{
  extend: 'csv',
  action: function (e, dt, button, config) {
    const originalPageLength = dt.page.len();
    // 拉取全量数据
    dt.page.len(-1).draw();
    // 等待接口返回全量数据后执行导出
    setTimeout(() => {
      $.fn.dataTable.ext.buttons.csvHtml5.action.call(this, e, dt, button, config);
      // 恢复原有分页配置
      dt.page.len(originalPageLength).draw();
    }, 800); // 等待时长可根据你的接口响应速度调整
  },
  exportOptions: {
    modifier: {
      page: 'all',
      search: 'none'
    }
  }
}

• 后端接口新增适配逻辑：当收到请求参数length=-1时，跳过分页限制，返回当前过滤条件下的所有数据。

方案2：后端生成导出文件（适合大数据量场景） #

数据量较大时，全量拉取到客户端导出会造成页面卡顿，可直接由后端生成文件返回下载：

• 前端修改导出按钮逻辑，带当前查询参数请求后端导出接口：

{
  extend: 'csv',
  action: function (e, dt, button, config) {
    // 获取当前Datatables的过滤、排序参数
    const queryParams = dt.ajax.params();
    queryParams.exportType = 'csv';
    // 拼接参数跳转下载，也可以用form提交实现POST请求下载
    window.location.href = 'ajax.php?' + new URLSearchParams(queryParams).toString();
  }
}

• 后端接口收到exportType参数时，直接查询全量数据生成对应格式的文件，设置响应头触发浏览器下载即可。

注意：你原有配置中写在exportOptions.modifier里的serverSide: 'false'是无效参数，该配置为Datatables初始化全局参数，放在导出配置中不生效，可直接删除。

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