Datatable行分组后添加组小计及最终总计行实现方案咨询

我来帮你搞定这个需求！结合你正在用的DataTables行分组功能，我们可以通过rowGroup插件的回调和表格的绘制回调来实现分组小计与全局总计，具体实现步骤和代码如下：

核心思路 #

• 利用rowGroup的endRender回调：在每个分组结束时，计算当前组的金额总和并插入小计行。
• 利用drawCallback回调：在表格每次绘制完成后，计算所有数据的总金额，在列表末尾插入总计行（避免分页或排序后重复添加）。

完整代码示例 #

假设你的金额列是第4列（索引从0开始为3），分组依据是你隐藏的第1列（索引1），将以下代码整合到你的现有配置中：

$(function() {
  var table = $('#table').DataTable({
    "columnDefs": [
      { "visible": false, "targets": 1 }
    ],
    "order": [[ 1, 'asc' ]], // 补全分组排序规则，这里用升序
    "rowGroup": {
      "dataSrc": 1, // 指定分组依据的列索引
      "endRender": function(rows, group) {
        // 计算当前分组的金额小计
        var subtotal = rows.data().pluck(3)
          .reduce(function(acc, curr) {
            // 若金额带货币符号，先清理再转数字，比如：curr.replace(/[^0-9.]/g, '')
            return parseFloat(acc) + parseFloat(curr);
          }, 0);
        
        // 构建小计行，colspan需匹配你的表格列数（这里假设共5列，前4列合并）
        return $('<tr>')
          .append('<td colspan="4" style="text-align:right; font-weight:bold;">'+ group +' 小计:</td>')
          .append('<td style="font-weight:bold;">'+ subtotal.toFixed(2) +'</td>')
          .addClass('subtotal-row'); // 自定义类方便样式控制
      }
    },
    "drawCallback": function(settings) {
      var api = this.api();
      // 先移除已存在的总计行，避免重复添加
      api.table().body().find('.total-row').remove();
      
      // 计算当前页面所有数据的总金额（若需全量数据，去掉{page:'current'}）
      var grandTotal = api.column(3, {page:'current'})
        .data()
        .reduce(function(acc, curr) {
          return parseFloat(acc) + parseFloat(curr);
        }, 0);
      
      // 构建总计行并添加到表格末尾
      var totalRow = $('<tr>')
        .append('<td colspan="4" style="text-align:right; font-weight:bold; background:#f0f0f0;">总计:</td>')
        .append('<td style="font-weight:bold; background:#f0f0f0;">'+ grandTotal.toFixed(2) +'</td>')
        .addClass('total-row');
      
      $(api.table().body()).append(totalRow);
    }
  });
});

关键注意事项 #

1. 列索引调整：把代码中的column(3)和pluck(3)里的3改成你实际的金额列索引（从0开始计数）。
2. colspan适配：colspan="4"的数值需要等于你的表格总列数减1，保证小计/总计行的单元格合并正确。
3. 金额格式化：如果你的金额数据带有货币符号（如$、¥），需要在reduce里先清理符号，比如用curr.replace(/[^0-9.]/g, '')再转成数字。
4. 样式自定义：通过.subtotal-row和.total-row类可以自定义行的背景色、字体样式等，让小计/总计更醒目。
5. 全量总计：如果需要计算所有分页数据的总金额，只需去掉api.column(3, {page:'current'})中的{page:'current'}参数。

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