Rogtopia

The Mystical World of Roger.

Hello, My Name is Roger and I enjoy HTML, CSS, and Photoshop. Maybe I can show you some things.

Tablesorter Hover with Custom Widget

November 3, 2009 09:24AM

I had a project recently that jQuery's tablesorter could be used for. However, after implementing the tablesorter script my custom jquery hover code gets destroyed when you paginate the table or sort it. After some research, I discovered that I could re-implement my hover code in a tablesorter widget.

 <script type="text/javascript">
$(document).ready(function () {
    // tablesorter widget to setup rollovers on table rows
    $.tablesorter.addWidget({
        id: "hover",

        format: function(table) {
            $('tr',$(table)).mouseover(function () {
                $(this).addClass('hover');
            }).mouseout(function () {
                $(this).removeClass('hover');
            });
        }
    });
    // then instantiate your tablesorter calling the hover widget
    $('.tablesorter').tablesorter({widthFixed: true, widgets: ['hover'] });
});
</script> 

And there you have it. Now when you sort your table the hover events stay attached to the rows as they are reapplied by tablesorters format callback provided by the hover widget.

Go Back

call me 0094 712220905
prabhath1988@yahoo.com

HI MARTIN I WOULD LIKE TO KNOW
IF YOU ARE COMING ANY WERE IN KENT
THIS YEAR .
SEE YOU SOME TIME FARMER

ULD
,,,...;;;;;;;; LIKE TO KNOW



Comment