javascript - 当表格单元格匹配时，数据表突出显示第一个分页页面以外的行

Question

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

正如您将在下面的 JSFiddle 示例中看到的，我在加载时对位置列进行排序。当一行中有 2 个或更多相关位置时，我们突出显示父表行。我遇到的问题是，如果第一页上有一个位置在最后一个表行中并且与第一个位置匹配第二页第一页上的最后一个表行未突出显示。我在这里使用的示例是开发人员职位。

JSFiddle

https://jsfiddle.net/ebRXw/563/

JS

$(document).ready(function () {

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

    highlight();

    $('table').on('draw.dt', function () {
        if ($("thead th:nth-child(2)").hasClass("sorting_desc") || $("thead th:nth-child(2)").hasClass("sorting_asc")) {
            highlight();
        } else {
            $("td").removeClass("info");
            $("td").css("border-bottom", "");
        }
    });

    function highlight() {

        var duplicate = false;

        $("table tbody tr").each(function () {
            var $current = $(this).children(":nth-child(2)");
            var $next = $(this).next().children(":nth-child(2)");
            if ($current.text() === $next.text() && !duplicate) {
                duplicate = true;
                $current.parent().children().addClass("info");
                $current.parent().prev().children().css("border-bottom", "1px solid #333");
            } else if ($current.text() === $next.text() && duplicate) {
                $current.parent().children().addClass("info");
            } else if ($current.text() !== $next.text() && duplicate) {
                $current.parent().children().addClass("info");
                $current.parent().children().css("border-bottom", "1px solid #333");
                duplicate = false;
            } else {
                $current.parent().children().removeClass("info");
                $current.parent().children().css("border-bottom", "");
            }
        });
    }

});

Answer 1

在 DataTables 中，只有可见的行存在于 DOM 中，这就是为什么 next() 和 prev() 不能按预期工作的原因。

您可以使用 rows({ search: 'applied' ).nodes()获取应用过滤的所有行。

此外，由于您正在处理整个数据集，因此附加到 order.dt 事件而不是在排序时仅突出显示行一次是有意义的。

参见 updated jsFiddle用于代码和演示。

但是我建议看Row grouping example ，它似乎在可用性和代码方面更好。