如何在DataTables.js服务端模式下为td单元格设置样式与data属性？

完全可以实现需求，而且不需要为每一列单独编写规则，以下是通用的实现方式：

1. 后端返回标准JSON格式 #

首先确保ajax.php返回标准JSON格式，示例PHP代码：

<?php
$response = [
    "draw" => 1,
    "recordsTotal" => 1,
    "recordsFiltered" => 1,
    "data" => [
        [
            ["data" => "<span>123</span>", "class" => "col-abc-class", "order" => 123],
            ["data" => "<span>456</span>", "class" => "col-xyz-class", "order" => 456, "param" => "test"]
        ]
    ]
];

header('Content-Type: application/json');
echo json_encode($response);
?>

2. 前端DataTables通用配置 #

利用DataTables的columnDefs和createdCell回调实现通用处理，无需为每列单独配置：

$('#your-table').DataTable({
    ajax: 'ajax.php',
    // 初始留空，后续动态生成列配置
    columns: [],
    initComplete: function(settings, json) {
        // 根据返回数据的第一行获取列数，生成对应列的渲染规则
        const columnCount = json.data[0].length;
        const columnsConfig = Array.from({length: columnCount}, () => ({
            render: function(cellData) {
                // 返回单元格的HTML内容
                return cellData.data;
            }
        }));
        this.api().columns().every(function(idx) {
            this.render(columnsConfig[idx].render);
        });
    },
    columnDefs: [{
        targets: '_all', // 匹配所有列
        createdCell: function(cell, cellData) {
            // 设置单元格class
            if (cellData.class) {
                $(cell).addClass(cellData.class);
            }
            // 遍历所有额外参数，转为data-*属性
            Object.keys(cellData).forEach(key => {
                if (!['data', 'class'].includes(key)) {
                    $(cell).attr(`data-${key}`, cellData[key]);
                }
            });
        }
    }]
});

关键逻辑说明 #

• 动态列配置：通过initComplete回调根据返回数据自动生成列的渲染规则，适配任意列数。
• 通用属性处理：createdCell回调会在每个<td>创建后触发，统一处理class和自定义data属性——遍历单元格数据的所有键，排除内容(data)和class后，自动转为data-*属性，无需单独配置每一列。

这样就能自动生成你需要的HTML结构，且无需为每列编写单独规则。

内容的提问来源于stack exchange，提问作者Роман Лыжов