Javascript 当表单元格匹配时，Datatables会高亮显示第一个分页页以外的行

Datatables插件在试图突出显示第一个分页页面以外的行时给了我一些问题

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

JSFiddle

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", "");
            }
        });
    }

});

---

在

突出显示

功能中，您只查看当前页面的数据。这就是为什么“开发者”行看不到它在其他页面上实际上有一个重复的行

您应该做的是查看整个表的数据。您可以通过在

突出显示

函数的开头调用以下命令来完成此操作：

var data = $('table').dataTable().fnGetData();

在当前页面的每一行中，您可以通过调用以下命令查看表中是否有重复行：

var isDup = $.grep(data, function(d) { return d[1] === $current.text(); }).length > 1;

---

根据这个

isDup

var，您可以在DataTables中为info和border bottoms放置css，因为DOM中只有可见行，这就是为什么

next（）

和

prev（）

不能按预期工作的原因

可以使用获取应用筛选的所有行

另外，由于您处理的是整个数据集，因此有必要附加到

order.dt

事件，而不是在排序时只突出显示一次行

有关代码和演示，请参阅

然而，我建议您看看，它在可用性和代码方面似乎更好