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

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



Comment