使用DataTables页脚回调实现多列总和计算的相关问题

第一步：准备表格基础结构 #

先确保你的HTML表格包含<tfoot>标签，每一个需要展示求和结果的数值列对应预留一个页脚单元格：

<table id="yourTableId" class="display" width="100%">
  <thead>
    <tr>
      <th>业务字段</th>
      <th>数值列1</th>
      <th>数值列2</th>
      <th>数值列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 业务数据内容 -->
  </tbody>
  <tfoot>
    <tr>
      <th>总计</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </tfoot>
</table>

第二步：配置DataTables的footerCallback回调 #

初始化DataTables时添加页脚回调配置，可同时支持计算当前页总和、全表总和，按需调整即可：

$('#yourTableId').DataTable({
  // 你的其他DataTables基础配置：分页、数据源、排序规则等
  "footerCallback": function () {
    const tableApi = this.api();
    // 配置需要求和的列索引，索引从0开始计数，根据实际业务调整
    const sumColumns = [1, 2, 3];

    sumColumns.forEach(colIndex => {
      // 计算当前页该列总和
      const pageTotal = tableApi
        .column(colIndex, { page: 'current' })
        .data()
        .reduce((prev, curr) => {
          // 适配带格式的数值：自动过滤货币符号、千分位分隔符等非数值字符
          const prevNum = parseFloat(prev) || 0;
          const currNum = parseFloat(curr.toString().replace(/[^\d.-]/g, '')) || 0;
          return prevNum + currNum;
        }, 0);

      // 计算全表该列总和，不需要可删除
      const fullTotal = tableApi
        .column(colIndex)
        .data()
        .reduce((prev, curr) => {
          const prevNum = parseFloat(prev) || 0;
          const currNum = parseFloat(curr.toString().replace(/[^\d.-]/g, '')) || 0;
          return prevNum + currNum;
        }, 0);

      // 更新页脚展示内容，可自定义格式
      $(tableApi.column(colIndex).footer()).html(
        `当前页：${pageTotal.toFixed(2)}<br>全表：${fullTotal.toFixed(2)}`
      );
    });
  }
});

常见调整说明 #

• 求和列索引需要和你实际表格的列顺序对应，比如第一列是索引0，第二列是索引1，以此类推
• 如果你的数值没有特殊格式，可删除replace过滤逻辑，直接parseFloat转换即可
• toFixed(2)用于控制保留两位小数，可根据业务需求调整数值精度，也可以额外添加千分位、货币符号等展示格式
• 不需要展示全表总和的话，删除fullTotal相关的计算和展示逻辑即可

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