如何在Datatables中添加横向求和的小计列

核心实现逻辑 #

直接通过Datatables自带的columns.render回调在渲染行最后一列时实时计算当前行数值总和，无需单独遍历全表数据后再插入：

• 初始化表格时，为最后一列（小计列）配置渲染规则
• 回调内拿到当前行的全量数据，过滤掉非数值列后累加所有值
• 直接返回求和结果作为该列的展示内容

代码示例 #

$('#example').DataTable({
  // 其余原有配置保持不变
  "columns": [
    // 前面原有列的配置保持不变
    // 最后一列（小计列）的配置
    {
      "data": null, // 该列不绑定数据源，动态计算
      "render": function(data, type, row) {
        let sum = 0;
        // 遍历当前行所有需要求和的列，按你的实际列范围调整索引
        for(let i = 1; i <= 10; i++) {
          // 把单元格内容转成数字累加，空值默认按0处理
          sum += parseInt(row[i]) || 0;
        }
        return sum;
      }
    }
  ]
});

注意事项 #

• 求和的列索引范围要和你的实际表格数值列对应，若首列为不需要求和的标题列，从索引1开始遍历即可
• 如果数值带小数，把parseInt替换为parseFloat即可
• 如果需要支持单元格编辑后动态更新求和结果，可在编辑完成后调用table.row(rowSelector).invalidate().draw()刷新该行，就会自动重新计算小计值

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