服务端处理的DataTable动态添加类相关问题咨询

背景情况 #

我目前在做基于MySQL的服务端处理DataTable，初始化代码是这样的：

$(document).ready(function(){
 var table = $('#userDataList').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "fetchData.php",
        stateSave: true,
    });
});

现在碰到两个关于动态添加类的问题，想请教各位大佬：

问题1：怎么动态给这些元素加类？ #

• a) 所有偶数行
• b) 所有奇数列

问题2：按钮点击给奇数行加类，怎么适配服务端处理场景？ #

我试过用$('tr:nth-child(odd)').addClass('whatever');，但这代码只对当前页面有效，一旦分页、搜索、排序或者切页面，加的类就没了，这可咋整？

解决方案建议 #

针对你的这两个问题，我整理了适配服务端DataTable的解决办法，你可以试试：

问题1的解决办法：动态给偶数行、奇数列加类 #

DataTable有个drawCallback回调，每次表格重绘（包括分页、排序、搜索之后）都会触发它，我们就把加类的逻辑放在这里面，这样每次重绘都会重新应用样式：

$(document).ready(function(){
 var table = $('#userDataList').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "fetchData.php",
        stateSave: true,
        drawCallback: function(settings) {
            // a) 给偶数行加类
            this.api().rows().nodes().to$().filter(':even').addClass('even-row-class');
            // 也可以用更贴合DataTable的写法：
            // this.api().rows().every(function(index) {
            //     if (index % 2 === 0) {
            //         $(this.node()).addClass('even-row-class');
            //     }
            // });

            // b) 给奇数列加类
            this.api().columns().every(function(index) {
                // 注意哦：DataTable的列索引是从0开始的，这里判断的是索引为奇数的列（也就是视觉上的第2、4列...）
                // 如果要选视觉上的奇数列（第1、3列），就改成index % 2 === 0
                if (index % 2 !== 0) {
                    this.nodes().addClass('odd-column-class');
                }
            });
        }
    });
});

这里要注意列索引的起始值，根据你实际要选的列调整判断条件就行。

问题2的解决办法：按钮点击加类，适配重绘场景 #

因为服务端处理的DataTable每次重绘都会重新渲染DOM，直接用jQuery加类肯定会失效。我们可以先把需要加类的行标记下来，然后每次重绘的时候根据标记重新加类：

$(document).ready(function(){
 var table = $('#userDataList').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "fetchData.php",
        stateSave: true,
        drawCallback: function(settings) {
            // 每次表格重绘，就给之前标记过的行重新加上类
            markedRows.forEach(function(rowId) {
                $(table.row('#' + rowId).node()).addClass('whatever');
            });
        }
    });

    // 用数组存需要加类的行ID，避免重复添加
    let markedRows = [];

    // 按钮点击事件，假设按钮ID是addOddRowClassBtn
    $('#addOddRowClassBtn').click(function() {
        // 找到所有奇数行，给它们加类并存下ID
        table.rows().nodes().to$().filter(':odd').each(function() {
            let rowId = $(this).attr('id');
            $(this).addClass('whatever');
            // 检查一下，没存过的ID再存进去
            if (!markedRows.includes(rowId)) {
                markedRows.push(rowId);
            }
        });
    });
});

如果你的行没有设置ID，也可以用后端返回的唯一数据标识（比如每行的id字段），通过table.row(this).data().id来获取，这样更靠谱，毕竟行索引可能会变。

另外，如果只是想给奇数行加个静态样式，其实直接用CSS伪类最省事，完全不用JS，还自动适配所有场景：

#userDataList tbody tr:nth-child(odd) {
    background-color: #f5f5f5;
    /* 其他你想要的样式 */
}

但如果是必须通过按钮触发的动态场景，就用上面标记行的方法就行。

备注：内容来源于stack exchange，提问作者varghese