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

Posted by Roger 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.

Comments

Dear Author rogtopia.com !
You are mistaken. Write to me in PM.

tired of comments like "Good night! " or buy antibiotics online. Then write to me at icq 75949683256...

Add comment

Powered by Viviti