CODEWITHSUNDEEP
javascriptjquerydatatables
user262430
user262430

Reputation: 229

Datatables highlight rows beyond the first paginated page when table cells match

The Datatables plugin is giving me some issues when trying to highlight rows beyond the first paginated page.

As you will see in the example JSFiddle below I am sorting on the positions column on load. When there are 2 or more related positions in a row we highlight the parent table rows.The issue I am having is that if there is one position on the first page that is in the last table row and that matches the the first position on the second page the last table row on the first page is not highlighted. The example I am using here is the developer position.

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

});

Upvotes: 1

Views: 573

Answers (2)

Gyrocode.com
Gyrocode.com

Reputation: 58880

In DataTables only visible rows exist in DOM, that is why next() and prev() don't work as expected.

You can use rows({ search: 'applied' ).nodes() to get all the rows with filtering applied.

Also since you're working on the whole dataset, it makes sense to attach to order.dt event instead to highlight rows only once on ordering.

See updated jsFiddle for code and demonstration.

However I would recommend to see Row grouping example, it seems to be better in terms of usability and code.

Upvotes: 1

Philip Bijker
Philip Bijker

Reputation: 5115

In the highlight function, you're only looking at the the data of the current page. That is why the "Developer" row doesn't see that it actually has a duplicate row on some other page.

What you should do is look at the data of the entire table. You can do this by calling the following at the start of the highlight function:

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

In each row of the current page you can than see if there's a duplicate row somewhere in the table by calling:

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

Depending on this isDup var you can place css for info and border bottoms

Upvotes: 1

Related Questions