前端使用Yajra DataTable时如何为列内td设置属性或添加类

方案1：后端PHP端配置（仅服务端渲染场景可用） #

直接在服务端构造Datatables响应时调用对应方法设置，示例代码如下：

return datatables()->of(User::query())
    // 给name列添加固定类名
    ->setColumnClass('name', 'text-primary fw-bold')
    // 给name列添加自定义属性，支持传入闭包动态获取行数据
    ->setColumnAttr('name', 'data-user-id', function($row) {
        return $row->id;
    })
    ->addColumn('action', function ($row) {
        return '<button class="btn btn-sm btn-edit">编辑</button>';
    })
    ->rawColumns(['action'])
    ->toJson();

注意：部分低版本Yajra Datatables需要额外安装yajra/laravel-datatables-html扩展才可使用上述setColumnClass、setColumnAttr链式方法。 #

方案2：前端初始化配置（全场景通用，灵活性更高） #

在前端初始化Datatables实例时，对指定列配置className参数加类名，通过createdCell回调加自定义属性，支持动态判断行数据生成属性/类名，示例代码如下：

$('#data-table').DataTable({
    processing: true,
    serverSide: true,
    ajax: '/user/list',
    columns: [
        {data: 'id', name: 'id'},
        {
            data: 'name',
            name: 'name',
            // 给当前列所有td添加固定类名
            className: 'text-primary fw-bold',
            // 单元格创建完成后的回调，可自定义所有属性/类名
            createdCell: function (td, cellData, rowData) {
                // 添加自定义属性
                td.setAttribute('data-user-id', rowData.id);
                td.setAttribute('data-user-status', rowData.status);
                // 动态添加类名
                if (rowData.status === 1) {
                    td.classList.add('text-success');
                } else {
                    td.classList.add('text-muted');
                }
            }
        },
        {data: 'action', name: 'action', orderable: false, searchable: false}
    ]
});

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