jQuery plugin Tablesorter 2.0 behaves weird

Question

I downloaded the jQuery plugin Tablesorter 2.0 from http://tablesorter.com/jquery.tablesorter.zip and modified the example-pager.html which is in tablesorter/docs directory

I wrote additional Rollover effects:

    $(function() {
        $("table")
            .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});

            /** Additional code */
            $("tr").mouseover(function () { 
            $(this).addClass('over');
            });

            $("tr").mouseout(function () {  
            $(this).removeClass('over');
            });

            $("tr").click(function () { 
            $(this).addClass('marked');
            });

            $("tr").dblclick(function () {  
            $(this).removeClass('marked');
            });
            /** Additional code END  */


});

And of course modified the themes/blue/style.css file:

/* Additional code */
table.tablesorter tbody  tr.odd td {
background-color: #D1D1F0;
}

table.tablesorter tbody  tr.even td {
background-color: #EFDEDE;
}


table.tablesorter tbody  tr.over td {
background-color: #FBCA33;
}

table.tablesorter tbody  tr.marked td {
background-color: #FB4133;
}
/* Additional code END*/

All this works fine BUT when I go to further pages i.e. page 2 3 or 4 the effects are gone! I really appreciate your help

Answer 1

To whom it might concern:

I solved the problem!!

I just call the pager function after putting the rollover and marked effects, here is the code:

$(function() {
    $("table").tablesorter({widthFixed: true, widgets: ['zebra']});

            $("tr").mouseover(function () { 
            $(this).addClass('over');
            });

            $("tr").mouseout(function () {  
            $(this).removeClass('over');
            });

            $("tr").click(function () { 
            $(this).addClass('marked');
            });

            $("tr").dblclick(function () {  
            $(this).removeClass('marked');
            });

        $("table").tablesorterPager({container: $("#pager")});  
    });

Answer 2

I also faced one issue when after sorting the row coloring was getting messed. I resolved it via specifying the following:

$(#your_table).tablesorter({ widgets: ["zebra"], widgetZebra: {css: ["your_odd_css","your_even_css"]} });

This works good now. No coloring issues.