Zebra striping - Tablesorter vs Sieve

Question

I have some tables which use the jQuery plugin 'tablesorter' to allow easy sorting. Recently, I found out that it included a zebra striping widget. I enabled it, and it's been working well.

I also decided to add the 'Sieve' plugin, as an alternative to the existing, homebuilt table search function, and that's where my problem arose - the striping is not redone during or after the search, leaving the table uneven and mismatched.

Thus far, I haven't been able to find a way to make it manually refresh, and I'm not sure where I would put it if I had - in the sieve .js file? Is there a way to make these two plugins play nice with each other?

why wouldn't you use tablesorter filtering? mottie.github.io/tablesorter/docs/example-widget-filter.html — charlietfl
I think you will find that the original tablesorter hasn't been updated since about 2008, and that at least one fork by Mottie is actively maintained - and includes some mention of zebrastriping in the changelog. To give yourself the best chance of success, I suggest using Mottie's fork. — Roamer-1888
@charlietfl Well, I didn't know it existed until I read your and Roamer's comments. The version I had came with the application when I inherited it. I've found an equivalent to Sieve with mottie.github.io/tablesorter/docs/… however, I'm not sure where to put the JS code from that example. Would you know? — Damien H

Mottie Mottie · Accepted Answer · 2014-11-08T21:04:54

If you want to use the Sieve plugin, this code will work with either the original version of tablesorter or my fork of tablesorter (demo):

$(function () {
    var $table = $('table');

    $table
        .tablesorter({
            widgets: ['zebra']
        })
        .sieve({
            complete: function(){
                // update the zebra widget after Sieve completes
                $table.trigger('applyWidgets');
            }
        });

});

Zebra striping - Tablesorter vs Sieve

1 Answers