CODEWITHSUNDEEP
javascriptjquerydatatables
user262430
user262430

Reputation: 229

Datatables highlight rows beyond the first paginated page

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

In the JS below you will see the commented out code where I am adding the class info to all the rows. When I do this and you paginate to the other pages all the rows on the other pages are highlighted. You will also see the uncommented code below where I add the class info to all the rows but the first row but in this case when I paginate to the other pages the rows are not highlighted.

Does anyone have any ideas on why this might be happening?

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

});

Upvotes: 0

Views: 603

Answers (1)

alan0xd7
alan0xd7

Reputation: 1851

rowsNext.addClass("info") only adds the class to the rows on the current page, and it is only run once when the page loads.

If you want to run it every time when a different page loads, you can add an event listener to the table's draw event, like this:

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

This code will be run every time a new page is drawn.

Demo: https://jsfiddle.net/alan0xd7/ebRXw/567/

Upvotes: 2

Related Questions