TableSorter Filter and scroller widget update

Question

I'm trying use TableSorter with Widgets Scroller and Filters, they work perfect,

$("table").tablesorter({
    theme: 'blue',
    widgets: ["zebra", "filter", "scroller" ]

});

But, my table begin null or empty and after I input the data, so I've to use Update.

$("table").trigger("updateAll")

There's my problem, I can't doing work Scroller and Filter at same time, just one or another.

Can someone help me?

(Sorry if my english is being bad)

Example: http://jsfiddle.net/s4ACj/5/

Answer 1

There are two issues.

1. The filter widget does not initialize on an empty table.
2. The scroller widget needs a lot of bug fixes (which I have not had time to do)
   • including adding the filter row if it was not present on initialization.
   • completely removing the scroller widget when updating the table
   • etc.

In order to work around this issue, try changing your append code to this (update demo):

$("#append").click(function () {
    // add some html
    var html = "<tr><td>Aaron</td><td>Johnson Sr</td><td>Atlanta</td><td>GA</td></tr>",
        // scroller makes a clone of the table before the original
        $table = $('table.update:last');

    // append new html to table body 
    $table.find("tbody").append(html);

    // remove scroller widget completely
    $table.closest('.tablesorter-scroller').find('.tablesorter-scroller-header').remove();
    $table
        .unwrap()
        .find('.tablesorter-filter-row').removeClass('hideme').end()
        .find('thead').show().css('visibility', 'visible');
    $table[0].config.isScrolling = false;

    // let the plugin know that we made a update, then the plugin will
    // automatically sort the table based on the header settings
    $("table.update").trigger("update");

    return false;
});

I'll try to patch up, bug fix and probably completely rewrite the scroller widget when I have time.