jQuery DataTables Responsive模式下createdCell自定义样式失效问题

问题表现 #

• 非响应式模式下，通过createdCell给STATUS列设置的状态文字颜色、加粗样式正常生效
  
• 表格进入响应式折叠模式后，自定义样式全部失效
  

问题根因 #

DataTables的Responsive响应式插件在折叠隐藏列时，不会直接复用原表格中<td>节点，而是会重新生成子行内的DOM结构，之前通过createdCell给原td绑定的内联样式，不会被自动带到新生成的子行节点上，所以样式会丢失。

推荐解决方案 #

优先使用渲染阶段直接给内容加样式的方案，兼容性最好，不需要额外绑定事件，适配所有响应式场景：

1. 移除columnDefs中针对第3列（STATUS列）写的createdCell样式逻辑
2. 在columns配置项中，给status字段添加render函数，直接把样式绑定在内容包裹标签上，修改后的status列配置如下：

{ 
    data: 'status',
    render: function (cellData) {
        let style = 'font-weight:bold;';
        switch(cellData) {
            case 'Pending':
                style += 'color:#e27522;';
                break;
            case 'Confirmed':
                style += 'color:green;';
                break;
            case 'Accepted':
                style += 'color:lightgreen;';
                break;
        }
        return `<span style="${style}">${cellData}</span>`;
    }
}

这种写法是把样式直接绑定在单元格渲染的内容本身，不管是正常表格行展示，还是响应式折叠后在子行中展示，渲染出的HTML内容会被完整复用，样式不会丢失。

备选方案（不推荐） #

如果一定要操作DOM节点样式，可以监听Responsive插件的responsive-display事件，在子行渲染完成后重新遍历节点添加样式，示例代码如下：

const table = $('#jquery-datatable-ajax-php').DataTable({
    // 原有其他配置项保持不变，移除原来columnDefs里的createdCell样式逻辑
});

// 监听响应式子行展开渲染事件
table.on('responsive-display', function (e, dt, row, show) {
    if (!show) return;
    const childContainer = row.child();
    // 遍历子行里的每一项，匹配状态值加样式
    childContainer.find('.dtr-data').each(function() {
        const val = $(this).text().trim();
        const cssMap = {'font-weight': 'bold'};
        if (val === 'Pending') cssMap.color = '#e27522';
        if (val === 'Confirmed') cssMap.color = 'green';
        if (val === 'Accepted') cssMap.color = 'lightgreen';
        $(this).css(cssMap);
    })
})

这个方案的缺点是依赖响应式插件的DOM类名结构，后续插件版本更新如果调整了DOM结构，代码可能失效，所以优先选择render方案。

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