Datatables开启pagination时responsive功能在非首页失效问题求解

这是Datatables Responsive扩展的常见已知问题，根因为Responsive扩展默认仅在表格首次初始化渲染时对当前可视页的行元素执行响应式适配逻辑，分页切换、搜索、排序等操作触发表格重绘后，新渲染的行元素未触发响应式重新计算，导致移动端折叠交互失效。

修复方案 #

• 方案1：通过drawCallback回调强制表格每次重绘后重新计算响应式布局
  调整表格初始化配置如下：

  $('#你的表格ID').DataTable({
    responsive: true,
    // 保留你的其他原有配置，比如分页、按钮、排序相关配置
    drawCallback: function () {
      // 每次表格重绘完成后触发响应式重新计算
      this.responsive.recalc();
    }
  });
  

  部分低版本如果上述写法报错，可以替换为$(this).DataTable().responsive.recalc();适配调用规则。如果开启了延迟渲染deferRender配置，该方案同样适用。
• 方案2：升级组件版本
  该问题在Responsive扩展1.0.x版本中普遍存在，直接将Responsive扩展升级至2.2.0及以上版本，搭配Datatables核心库1.11.0及以上版本，即可从底层修复该问题，无需额外添加回调逻辑。
• 方案3：服务器端分页适配
  如果你开启了服务器端分页（serverSide: true），上述drawCallback回调的修复逻辑依然适用，只需要确保回调逻辑在初始化配置中正常添加即可。

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