如何为datatables.net的页脚总计值添加千分位数字格式化

直接复用你已经在使用的DataTables内置数字渲染器即可，不需要额外手写千分位转换逻辑，能保证表格单元格和页脚合计的格式化规则完全一致。

快速修改方案 #

你只需要在drawCallback中调用和列配置完全相同的number渲染方法，对计算出的合计值做格式化后再插入页脚即可，修改后的代码如下：

"drawCallback": function () {
    var api = this.api();
    // 复用和单元格完全一致的数字格式化规则
    var formatNumber = $.fn.dataTable.render.number(',', '.', 2, '').display;
    var column = api.column(7);
    // 计算当前页合计原始值
    var total = api.column(7, { page: 'current' }).data().sum();
    // 格式化后拼接展示
    $(column.footer()).html(
        "Total:   " + formatNumber(total)
    );
}

更易维护的写法 #

建议把数字格式化规则抽成公共变量，列渲染和页脚计算共用同一个配置，后续调整小数位、分隔符时只需要修改一处，避免两边格式不统一：

// 表格初始化前，在当前作用域定义统一的数字格式化器
const numberFormatter = $.fn.dataTable.render.number(',', '.', 2, '').display;

$('#yourTable').DataTable({
    // 其他配置项...
    "columns": [
        // 其他列配置...
        {
            // 第7列的配置
            "render": numberFormatter // 单元格直接复用格式化器
        }
    ],
    "drawCallback": function () {
        var api = this.api();
        var total = api.column(7, { page: 'current' }).data().sum();
        $(api.column(7).footer()).html(
            "Total:   " + numberFormatter(total)
        );
    }
});

说明：调用渲染器的display方法传入原始数值，就会自动按照你设定的「千分位逗号、小数点用点号、保留2位小数、无货币前缀」规则返回格式化后的字符串，和表格内普通单元格的展示效果完全一致。

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