如何在jQuery DataTable中查找值并高亮对应行

原代码存在的问题 #

• 第一段代码：table.column(0)返回的是DataTables的列对象，不是单元格数据数组，用$.each遍历会拿到列对象的内部属性而非实际值；而且匹配成功后错误地修改固定的第0行，不是当前匹配的目标行。
• 第二段代码：table.row(0).length无法正确获取总行数，应该用table.rows().count()；另外table.column(0).item(i).data()的写法不符合DataTables API规范，容易导致取值错误。

正确实现方案 #

方案1：用DataTables内置的rows().every()遍历行（推荐） #

table.rows().every(function() {
    // 获取当前行第一列的数据
    const firstColValue = this.data()[0];
    if (firstColValue === "value") {
        // 获取行对应的DOM元素，设置背景色
        $(this.node()).css('background-color', 'red');
    }
});

方案2：通过行索引循环检查 #

const rowTotal = table.rows().count();
for (let i = 0; i < rowTotal; i++) {
    const currentRow = table.row(i);
    const firstColData = currentRow.data()[0];
    if (firstColData === "value") {
        $(currentRow.node()).css('background-color', 'red');
    }
}

注意事项 #

• 必须通过row.node()获取行对应的DOM元素，再调用jQuery的css()方法——因为DataTables的row()返回的是行实例对象，不是DOM节点，直接调用css()无效。
• 如果你的表格是服务器端分页，需要把样式设置逻辑绑定到draw.dt事件上，确保每次分页渲染后都能重新匹配：

table.on('draw.dt', function() {
    table.rows().every(function() {
        const firstColValue = this.data()[0];
        if (firstColValue === "value") {
            $(this.node()).css('background-color', 'red');
        }
    });
});

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