DataTable指定列求和在tfoot页脚展示，使用footerCallback无显示如何解决

问题原因及解决方法 #

导致页脚求和结果不显示的常见原因及对应修复方案如下：

1. 数值转换函数兼容不足：原有intVal仅过滤了美元符和逗号，若数字存在其他格式字符容易转换失败得到NaN，导致赋值无内容
2. 变量未声明触发严格模式报错：原有代码未声明qtyTotal、priceTotal变量，部分浏览器严格模式下会阻断后续执行
3. 无分页时的页选择参数冗余：你已配置paging: false关闭分页，{page: 'current'}参数可省略避免不必要的逻辑执行

修复后的代码 #

替换你Datatables配置中的footerCallback部分即可：

"footerCallback": function ( row, data, start, end, display ) {
    var api = this.api(), data;
    // 优化数值转换逻辑，清除所有非数字、小数点的字符，兼容性更强
    var intVal = function (i) {
        return typeof i === 'string' ? i.replace(/[^0-9.]/g, '')*1 : typeof i === 'number' ? i : 0;
    };  

    // 求和计算
    var qtyTotal = api.column(7).data().reduce( function (a, b) {
            return intVal(a) + intVal(b);
        },0);  
    var priceTotal = api.column(8).data().reduce( function (a, b) {
            return intVal(a) + intVal(b);
        },0); 

    // 更新页脚，价格格式化和表格原有格式统一
    $( api.column(7).footer()).html(qtyTotal);
    $( api.column(8).footer()).html(priceTotal.toLocaleString());
}

验证步骤 #

如果修改后仍无结果，按以下顺序排查：

• 打开浏览器开发者工具的控制台，查看是否有JS报错
• 在footerCallback末尾添加console.log(qtyTotal, priceTotal)，确认求和结果是否正常计算：
  • 若控制台输出正确数值，检查页面CSS是否设置了tfoot不可见、字体颜色和背景重合等样式问题
  • 若控制台输出NaN，核对你表格中Quantity、Price列的数字格式，调整intVal的正则适配即可

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