服务器端Datatables动态添加addClass：偶数行、奇数列实现方案

实现思路 #

由于是serverSide模式的DataTables，数据会随分页、排序、搜索动态渲染，因此必须在表格每次绘制完成后重新应用样式；同时封装通用处理函数，兼顾自动执行与手动触发需求。

完整代码 #

1. 页面结构（添加触发按钮） #

<button id="applyStyleBtn">手动应用样式</button>
<table id="userDataList" class="display" style="width:100%"></table>

2. JavaScript逻辑 #

$(document).ready(function(){
    const table = $('#userDataList').DataTable({
        processing: true,
        serverSide: true,
        ajax: "fetchData.php",
        stateSave: true // 修正：布尔值无需引号
    });

    // 封装样式处理核心函数
    function setTableStyles() {
        // 清除旧样式类，避免重复叠加
        $('#userDataList tbody tr').removeClass('even-row');
        $('#userDataList tbody td').removeClass('odd-column');

        // a) 为视觉上的偶数行添加类（第2、4、6...行）
        $('#userDataList tbody tr:nth-child(even)').addClass('even-row');
        // 若需按索引0开始的偶数行（第1、3、5...行），替换为: $('#userDataList tbody tr:even').addClass('even-row');

        // b) 为视觉上的奇数列添加类（第1、3、5...列）
        $('#userDataList tbody td:nth-child(odd)').addClass('odd-column');
        // 若需按索引0开始的奇数列（第2、4、6...列），替换为: $('#userDataList tbody td:odd').addClass('odd-column');
    }

    // 自动执行：表格每次绘制完成后自动应用样式
    table.on('draw.dt', setTableStyles);

    // 手动触发：按钮点击时执行样式设置
    $('#applyStyleBtn').on('click', setTableStyles);
});

3. 样式示例 #

/* 偶数行自定义样式 */
.even-row {
    background-color: #f5f5f5;
}

/* 奇数列自定义样式 */
.odd-column {
    background-color: #e8f4fc;
}

关键细节说明 #

• serverSide模式适配：必须监听draw.dt事件，因为服务端分页/排序后会重新生成tbody内的DOM元素，之前绑定的样式会失效，每次绘制完成后重新应用才能保证所有行/列都被覆盖。
• 样式重置：每次执行前移除旧类，防止多次触发导致样式重复叠加。
• 选择器灵活调整：根据实际需求选择nth-child（视觉顺序，从1计数）或:even/:odd（DOM索引，从0计数）选择器。

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