如何为所有jQuery DataTables设置全局通用的数值格式化配置

核心实现逻辑为：先注册全局通用的智能数值渲染器，自动识别整数/浮点数匹配对应的格式化规则，再灵活适配不同表格的目标列需求，无需在每个表格中重复编写格式化逻辑。

1. 注册全局智能数值渲染器 #

// 全局注册智能数值格式化渲染器
$.fn.dataTable.render.intelliNumber = function() {
    return function(data, type, row) {
        // 仅修改展示态内容，排序、过滤逻辑沿用原始值避免异常
        if (type !== 'display' || isNaN(Number(data))) return data;
        const num = Number(data);
        // 自动判断小数位数：整数保留0位，浮点数保留2位
        const decimalPlaces = Number.isInteger(num) ? 0 : 2;
        return $.fn.dataTable.render.number(',', '.', decimalPlaces).display(data);
    }
};

2. 两种适配用法（二选一即可） #

用法1：各表格单独指定目标列索引 #

适合列顺序固定的场景，每个表格初始化时仅需传入自身的数值列索引即可：

// 表格1初始化，数值列为第0、1、3列
$('#table1').DataTable({
    columnDefs: [{
        targets: [0,1,3],
        render: $.fn.dataTable.render.intelliNumber()
    }]
});

// 表格2初始化，数值列为第2、4、5列
$('#table2').DataTable({
    columnDefs: [{
        targets: [2,4,5],
        render: $.fn.dataTable.render.intelliNumber()
    }]
});

用法2（更推荐）：类名自动匹配全局生效 #

适合列顺序可能变动的场景，无需每个表格编写columnDefs配置，仅需在HTML表头给数值列添加指定类名即可：

// 全局默认配置：自动匹配所有带num-col类的列应用格式化
$.extend($.fn.dataTable.defaults, {        
    columnDefs: [{
        targets: '.num-col',
        render: $.fn.dataTable.render.intelliNumber()
    }]
});

对应表头写法示例：

<thead>
    <tr>
        <th class="num-col">销量（整数）</th>
        <th>商品名称</th>
        <th class="num-col">单价（浮点数）</th>
        <th>分类</th>
        <th class="num-col">营收（浮点数）</th>
    </tr>
</thead>

实现效果 #

• 整数值1234自动格式化为1,234
• 浮点数值1234.00自动格式化为1,234.00
• 非数值内容不做处理，不影响原有展示逻辑
• 排序、过滤功能基于原始数值计算，不会出现格式化后的排序异常

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