jQuery DataTable列求和结果异常，含负值列出现科学计数法结果

嘿，这个问题我太熟了！其实不是负值本身导致的，罪魁祸首是JavaScript的浮点数精度特性——当你累加正负混合的小数时，二进制浮点数的存储误差会被放大，最后就出现了像1.0771827874123119e-11这种科学计数法的极小值，本质上这就是个接近0的误差值。前两列之所以正常，大概率是因为它们的数值都是正数，或者累加后的误差刚好被抵消了，没显现出来而已。

核心解决方案：处理浮点数精度+格式化输出 #

这里给你几个实用的解决办法，按推荐程度排序：

1. 用toFixed()格式化结果（最直接）

通过指定小数位数，把计算结果转换成固定格式的字符串，既消除科学计数法，也能把极小的误差值转成你需要的小数位数（比如保留2位）。

示例代码片段：

// 计算第三列的求和值
var sum3 = api.column(2, {page:'current'}).data().reduce(function(a, b) {
    // 确保每个数据项都被正确转成浮点数
    return parseFloat(a) + parseFloat(b);
}, 0);

// 格式化输出：保留2位小数，同时把极小误差值直接设为0（可选）
sum3 = Math.abs(sum3) < 0.0001 ? 0 : sum3;
$(api.column(2).footer()).html(sum3.toFixed(2));

2. 转成整数计算（彻底避免浮点数误差）

如果你的数值是金额、数量这类有固定小数位数的（比如2位小数），可以先把所有数值乘以100转成整数，累加后再除以100，从根源上避免浮点数精度问题。

示例代码片段：

var sum3 = api.column(2, {page:'current'}).data().reduce(function(a, b) {
    // 转成整数后累加
    return parseInt(parseFloat(a)*100) + parseInt(parseFloat(b)*100);
}, 0);

// 转回小数并格式化
sum3 = sum3 / 100;
$(api.column(2).footer()).html(sum3.toFixed(2));

完整的footerCallback示例

把上面的逻辑整合到你的代码里，完整版本如下：

$('.dataTablesSum1').DataTable({
    "footerCallback": function (row, data, start, end, display) {
        var api = this.api();

        // 封装通用的求和函数
        function getColumnSum(columnIndex) {
            return api.column(columnIndex, {page:'current'}).data().reduce(function(a, b) {
                return parseFloat(a) + parseFloat(b);
            }, 0);
        }

        // 处理第一列求和
        var sum1 = getColumnSum(0);
        $(api.column(0).footer()).html(sum1.toFixed(2));

        // 处理第二列求和
        var sum2 = getColumnSum(1);
        $(api.column(1).footer()).html(sum2.toFixed(2));

        // 处理第三列求和（解决精度+科学计数法问题）
        var sum3 = getColumnSum(2);
        // 把极小的误差值直接设为0
        sum3 = Math.abs(sum3) < 0.0001 ? 0 : sum3;
        $(api.column(2).footer()).html(sum3.toFixed(2));
    }
});

额外注意点 #

• 确保你的表格数据里没有隐藏的非数值内容，比如空格、字符串，parseFloat()会把这些转成NaN，导致求和错误。
• 如果你的数值小数位数不固定，可以调整toFixed()的参数（比如toFixed(4)），或者用Intl.NumberFormat做更灵活的格式化。

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