DataTables如何修改Ajax返回的表格字段数据做自定义格式化

直接用DataTables内置的columns.render渲染回调即可，这个回调会在每格数据渲染到页面前触发，你可以拿到当前字段的原始值，处理完返回要展示的内容就行，不需要修改Ajax接口的返回逻辑。

修改后的完整初始化代码 #

$(document).ready(function () {
    // 号码格式化函数：把+44开头的号码转成0开头的格式
    const formatNumber = (rawNum) => {
        if (!rawNum) return '';
        // 匹配开头的+44，替换成0，后面的内容保留
        return rawNum.toString().replace(/^\+44/, '0');
    };

    // 日期格式化函数：把DD-MM-YYYY格式转成"1st of January, 2023"格式
    const formatDate = (rawDate) => {
        if (!rawDate) return '';
        const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
        const [day, month, year] = rawDate.split('-');
        const dayNum = parseInt(day, 10);
        // 处理日期后缀
        let suffix = 'th';
        if (dayNum % 10 === 1 && dayNum !== 11) suffix = 'st';
        else if (dayNum % 10 === 2 && dayNum !== 12) suffix = 'nd';
        else if (dayNum % 10 === 3 && dayNum !== 13) suffix = 'rd';
        return `${dayNum}${suffix} of ${months[parseInt(month, 10) - 1]}, ${year}`;
    };

    var table = $('#List').DataTable({
        "ajax": 'ajax/ajax.php',
        "processing": true,
        "columns": [
            {
                "data": "Date",
                // 渲染回调处理日期
                "render": function(data, type, row) {
                    // 仅在展示的时候做格式化，排序、搜索等操作保留原始值，避免逻辑异常
                    return type === 'display' ? formatDate(data) : data;
                }
            },
            {
                "data": "Number",
                // 渲染回调处理号码
                "render": function(data, type, row) {
                    return type === 'display' ? formatNumber(data) : data;
                }
            }
        ],
        "columnDefs": [{
                "targets": -1,
                "data": "ID",
                "width": "20px",
                "className": "text-center"    
        }], 
        "pageLength": 50
    });
});

注意事项 #

• 代码里加了type === 'display'判断：只有数据渲染到页面给用户看的时候才用格式化后的值，表格排序、搜索、导出功能还是用接口返回的原始值，不会出现格式化后内容导致排序错乱、搜索匹配不到原始值的问题。
• 两个格式化函数可以根据实际规则调整：比如如果号码不是固定+44开头，修改formatNumber里的正则即可；如果日期原始格式不是日-月-年的拆分规则，对应调整formatDate里的拆分逻辑就行。
• 如果需要在数据刚从接口返回、还没分配到各列之前统一批量处理，也可以用ajax.dataSrc回调修改整个返回的数据集，但单字段格式化用columns.render是最灵活、维护成本最低的方案。

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