CODEWITHSUNDEEP
jqueryeffectstablesorterrolloverpager
Gunther von Goetzen Sanchez
Gunther von Goetzen Sanchez

Reputation: 156

jQuery plugin Tablesorter 2.0 behaves weird

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

Upvotes: 1

Views: 823

Answers (3)

Gunther von Goetzen Sanchez
Gunther von Goetzen Sanchez

Reputation: 156

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

Upvotes: 1

gracesinging
gracesinging

Reputation: 11

Just an FYI, if you wish to remove the 'marked' class for the previously selected row when clicking a new row, you can do this:

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

Upvotes: 1

sajoshi
sajoshi

Reputation: 2763

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.

Upvotes: 0

Related Questions