jquery tablesorter zebra on fadein not working?

Question

The issue I am having is probably due to ignorance of how jquery works, but I'll be brave and ask anyway.

I'm using tablesorter on a couple tables that are instantiated through an ajax call. a div container is faded out, populated with the tables, and faded back in.

here is the ajax call

$.ajax({
    url: "url",
    type: "GET",
    cache: false,
    data: 'cmd=scriptcmd',
    datatype: 'html',
    success: function(data)
    {
        $("#middle").fadeOut('slow',function(){
            $("#middle").html(data);
            $("table").tablesorter({
                 widgets: ['zebra'],
                 sortList: [[3,0]]});
        }).fadeIn('slow');
    }
 });

All of that works fine

Tablesorter sorts the tables and zebras them during the fadeOut callback.

Sorting is working cleanly with the fadeOut callback but not the zebra widget. clicking on a column to sort by triggers the zebra widget and it works fine then.

I notice if I call tablesorter with setTimeout, even with a 1 millisecond timer it works fine, but this is jumpy on screen and I find this very hacky.

Anyone care to demonstrate the correct way? Thanks in advance guys

what does zebra do anyway ? I could get the table working on fade and the sort works. — Dhiraj
changes the background color of every other row. easy on the eyes — steve

rd3n rd3n · Accepted Answer · 2012-10-17T09:38:15

Your table rows must be visible if you want the zebra widget to work as expected. Have a look in the jQuery.tablesorter zebra widget code:

ts.addWidget({
    id: "zebra",
    format: function (table) {
        if (table.config.debug) {
            var time = new Date();
        }
        var $tr, row = -1,
            odd;
        // *** loop through the visible rows ***
        $("tr:visible", table.tBodies[0]).each(function (i) {
            $tr = $(this);
            if (!$tr.hasClass(table.config.cssChildRow)) row++;
            odd = (row % 2 == 0);
            $tr.removeClass(
            table.config.widgetZebra.css[odd ? 0 : 1]).addClass(
            table.config.widgetZebra.css[odd ? 1 : 0])
        });
        if (table.config.debug) {
            $.tablesorter.benchmark("Applying Zebra widget", time);
        }
    }
});

As you can see, it only loop through the visible rows. In your code, the fadeOut callback function is fired once the animation is complete, so rows are not visible when zebra widget is applied.

jquery tablesorter zebra on fadein not working?

2 Answers