如何让DataTable Responsive的表格页脚支持折叠展开？

我明白你的痛点——DataTables的Responsive扩展确实默认只处理<thead>和<tbody>的内容，完全忽略了<tfoot>的汇总行，导致移动端查看时关键的汇总数据直接缺失。不用换插件，我这里有个亲测有效的方案，借助DataTables的API和一点自定义JS就能搞定：

核心思路 #

Responsive扩展会在列折叠/展开时触发responsive-resize事件，我们可以监听这个事件，同步<tfoot>单元格的可见状态和<tbody>的列保持一致；同时在表格初始化完成后，也要同步一次初始状态，确保页面加载时就正确显示。

完整实现代码 #

JavaScript 部分 #

$(document).ready(function() {
  // 初始化DataTables并启用Responsive
  const table = $('table').DataTable({
    responsive: true
  });

  // 定义同步页脚可见性的函数
  function syncFooterVisibility() {
    // 获取当前所有可见列的索引
    const visibleColumns = table.columns().visible();
    
    // 遍历页脚的每个单元格，同步对应列的可见状态
    table.tfoot().find('th').each(function(index) {
      $(this).toggle(visibleColumns[index]);
    });
  }

  // 初始化时同步一次
  syncFooterVisibility();

  // 监听Responsive的resize事件，每次列状态变化时同步
  table.on('responsive-resize', syncFooterVisibility);
});

HTML 部分（保持原结构，确保tfoot与thead列数一致） #

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <table class="table table-bordered table-hover dt-responsive">
        <thead>
          <tr>
            <th>Country</th>
            <th>Languages</th>
            <th>Population</th>
            <th>Median Age</th>
            <th>Area (Km²)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Argentina</td>
            <td>Spanish (official), English, Italian, German, French</td>
            <td>41,803,125</td>
            <td>31.3</td>
            <td>2,780,387</td>
          </tr>
          <tr>
            <td>Australia</td>
            <td>English 79%, native and other languages</td>
            <td>23,630,169</td>
            <td>37.3</td>
            <td>7,739,983</td>
          </tr>
          <tr>
            <td>Greece</td>
            <td>Greek 99% (official), English, French</td>
            <td>11,128,404</td>
            <td>43.2</td>
            <td>131,956</td>
          </tr>
          <tr>
            <td>Luxembourg</td>
            <td>Luxermbourgish (national) French, German (both administrative)</td>
            <td>536,761</td>
            <td>39.1</td>
            <td>2,586</td>
          </tr>
          <tr>
            <td>Russia</td>
            <td>Russian, others</td>
            <td>142,467,651</td>
            <td>38.4</td>
            <td>17,076,310</td>
          </tr>
          <tr>
            <td>Sweden</td>
            <td>Swedish, small Sami- and Finnish-speaking minorities</td>
            <td>9,631,261</td>
            <td>41.1</td>
            <td>449,954</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th>Total</th>
            <th>6</th>
            <th>229197371</th>
            <th>230.4</th>
            <th>28181176</th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

<!-- 依赖脚本保持原引入顺序 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js'></script>
<script src='https://cdn.datatables.net/responsive/1.0.4/js/dataTables.responsive.js'></script>

CSS 补充（可选，优化数值型汇总样式） #

/* 让页脚数值右对齐，和表格内容样式统一 */
table.dataTable tfoot th {
  white-space: nowrap;
  text-align: right;
}

效果说明 #

• 页面加载后，页脚会自动匹配初始可见列的状态，不会出现多余列
• 调整屏幕宽度或在移动端查看时，折叠列对应的页脚单元格会自动隐藏
• 点击行前的展开按钮时，对应的页脚汇总数据会同步显示，完全和tbody的交互逻辑一致

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