jQuery DataTables : each row highlight is not working except 1 page

Question

Here I am using 1.9.0 jQuery DataTables plugin and when I run my code it's showing paginated table data.

• each event worked for only 1st page when I used pagination, example:

  $('#table tr').each(function(){ /* something */ });

• but when I used event handler with click event it worked in all pages, example:

  $('#table').on("click", 'tr' ,function () { /* something */ });

Is there any other solution instead of click like:

$('#table').on("each", 'tr' ,function () { /* something */ });

var oTable = $("#products").dataTable({
    "aaData": [
        ["one", "two", "three", "four"],
        ["five", "six", "seven", "eight"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"]

    ],
        "bProcessing": true,
        "bDeferRender": true,
        "bFilter": false,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "sDom": '<"H"Tfr>t<"F"ip>',
        "bRetrieve": true,
        "bPaginate": true,
        "bSort": true,
        "aaSorting": [
        [4, "desc"]
    ],
        "iDisplayLength": 5,
        "aoColumns": [{
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, {
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, {
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, {
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, ],
        "aoColumnDefs": [{
        "fnRender": function (o, val) {

            return o.aData[0];
        },
            "sClass": "prodNbr first",
            "aTargets": [0]
    }, {
        "fnRender": function (o, val) {

            return o.aData[1];
        },
            "sClass": "Description",
            "aTargets": [1]
    }, {
        "fnRender": function (o, val) {

            return o.aData[2];
        },
            "sClass": "Partid",
            "aTargets": [2]
    }, {
        "fnRender": function (o, val) {

            return o.aData[3];
        },
            "sClass": "Description",
            "aTargets": [3]
    }]

});


/*$('#products tbody tr').on("each", '#products tbody tr',function () {
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});*/ //its not working.

/*$('body').on("click", '#products tbody tr' ,function () {
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
});*///its worked for all pages when i clicked only...
/*$('#products tr').each(function(){
    if ($(this).hasClass('selected')) $(this).removeClass('selected');
    else {
        $(this).siblings('.selected').removeClass('selected');
        $(this).addClass('selected');
    }
})*/  // its worked only 1st page...

#products {
    user-select:none;
    -webkit-user-select:none;
    -mox-user-select:none;
    -o-user-select:none;
    cursor:default;
}
#products tbody tr {
    cursor:pointer;
}
.selected, .selected > td {
    background-color:#CF0 !important;
}
.selected:hover, .selected:hover > td {
    background-color:#DBFF4C !important;
}
#table_container {
    margin:0 auto;
    width:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="table_container">
    <table border="1" cellspacing="0" cellpadding="0" id="products" style="clear:both;">
        <thead>
            <tr>
                <th>Column1</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

Answer 1

You have almost correct code in your question. You need to use delegated events, the correct code for click handler is shown below.

$('#products tbody').on('click', 'tr', function(){
    if ($(this).hasClass('selected')){
        $(this).removeClass('selected');
    } else {
        $(oTable.fnGetNodes()).removeClass('selected');
        $(this).addClass('selected');
    }
});

DataTables 1.9 API method fnGetNodes gets an array of the <tr> nodes that are used in the table's body. $(oTable.fnGetNodes()) returns jQuery collection of all <tr> nodes. I'm using that above to remove selected class from all rows.

If you want to enumerate all rows, the code is shown below:

$('#example').dataTable({
    "fnInitComplete": function(oSettings, json){
        $($('#example').dataTable().fnGetNodes()).each(function(){
           /* Process each row */
        });
    }
});

var oTable = $("#products").dataTable({
    "aaData": [
        ["one", "two", "three", "four"],
        ["five", "six", "seven", "eight"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"],
        ["one", "two", "three", "four"]

    ],
        "bProcessing": true,
        "bDeferRender": true,
        "bFilter": false,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "sDom": '<"H"Tfr>t<"F"ip>',
        "bRetrieve": true,
        "bPaginate": true,
        "bSort": true,
        "aaSorting": [
        [4, "desc"]
    ],
        "iDisplayLength": 5,
        "aoColumns": [{
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, {
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, {
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, {
        "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
    }, ],
        "aoColumnDefs": [{
        "fnRender": function (o, val) {

            return o.aData[0];
        },
            "sClass": "prodNbr first",
            "aTargets": [0]
    }, {
        "fnRender": function (o, val) {

            return o.aData[1];
        },
            "sClass": "Description",
            "aTargets": [1]
    }, {
        "fnRender": function (o, val) {

            return o.aData[2];
        },
            "sClass": "Partid",
            "aTargets": [2]
    }, {
        "fnRender": function (o, val) {

            return o.aData[3];
        },
            "sClass": "Description",
            "aTargets": [3]
    }]

});

$('#products tbody').on('click', 'tr',function(){
    if ($(this).hasClass('selected')){
        $(this).removeClass('selected');
    } else {
        $(oTable.fnGetNodes()).removeClass('selected');
        $(this).addClass('selected');
    }
});

#products {
    user-select:none;
    -webkit-user-select:none;
    -mox-user-select:none;
    -o-user-select:none;
    cursor:default;
}
#products tbody tr {
    cursor:pointer;
}
.selected, .selected > td {
    background-color:#CF0 !important;
}
.selected:hover, .selected:hover > td {
    background-color:#DBFF4C !important;
}
#table_container {
    margin:0 auto;
    width:500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet"/>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css" rel="stylesheet"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<div id="table_container">
    <table border="1" cellspacing="0" cellpadding="0" id="products" style="clear:both;">
        <thead>
            <tr>
                <th>Column1</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>