数据表突出显示第一个分页页面以外的行

Question

当我试图突出第一个分页页面以外的行时，Datatables 插件给我带来了一些问题。

在下面的 JS 中，您将看到我将 class 信息添加到所有行的注释掉的代码。当我这样做并且您分页到其他页面时，其他页面上的所有行都会突出显示。您还将在下面看到未注释的代码，其中我将 class 信息添加到除第一行以外的所有行，但在这种情况下，当我分页到其他页面时，这些行不会突出显示。

有人知道为什么会发生这种情况吗？

JSFiddle:

https://jsfiddle.net/ebRXw/560/

JS:

$(document).ready(function () {

    $('table').dataTable({
        "paging": true,
        "ordering": true,
        "filter": false,
        "length": false,
        "info": false
    });

    var table = $("table").dataTable();
    var rows = table.$("tr");
    var rowsNext = table.$("tr").next();
    var cell = table.$("td:nth-child(2)");
    var cellNext = table.$("tr").next().children("td:nth-child(2)");

    /*rows.addClass("info");*/
    rowsNext.addClass("info");

});

Answer 1

rowsNext.addClass("info")只在当前页面的行中添加class，页面加载时只添加运行一次。

如果你想在每次加载不同页面时都运行它，你可以向table的draw event添加一个事件监听器，像这样：

$("table").on("draw.dt", function(){
    var rowsNext = $("table").dataTable().$("tr").next();
    rowsNext.addClass("info");
});

每次绘制新页面时，此代码将运行。

演示：https://jsfiddle.net/alan0xd7/ebRXw/567/

数据表突出显示第一个分页页面以外的行

Datatables highlight rows beyond the first paginated page

javascript

jquery

datatables