Dynamically adding and removing widgets on Tablesorter

Question

At the start of jquery loading - a tablesorter is initialized using only zebra widget:

$('.tablesorter-blue').tablesorter({
   widthFixed : true,           
   usNumberFormat : false,
   sortReset      : true,
   sortRestart    : true,
   widgets        : ['zebra']
}); 

through a button click I add a 'scroller' widget dynamically:

$('.tablesorter-blue').trigger('applyWidgets', true);
$('.tablesorter-blue')[0].config.widgets = ['scroller'];

that works ok, as it added the scroller widget, and also retain the previous widget (zebra).

My problem is which I'm currently stuck with is to remove again the scroller widget from the tablesorter and just retain the zebra widget. I already try these codes, but failed:

from the documentation - refreshwidget - http://mottie.github.io/tablesorter/docs/#refreshwidgets:

//remove all widgets
$('.tablesorter-blue').trigger('refreshWidgets', true, true);
$('.tablesorter-blue')[0].config.widgets = [];

//re-add widget (zebra)
$('.tablesorter-blue').trigger('applyWidgets', true);
$('.tablesorter-blue')[0].config.widgets = ['zebra'];

This is the error reported:

TypeError: $(...)[0].config is undefined

UPDATE: code added as given by @mottie - no effect the scroller still there

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

UPDATE: 10 FEB, 2014

Problem is now solved thanks to mottie for the widget-scroller.js update. I already updated my code with the new version.

As shown in the demo, this is my code to add and remove scroller widget:

//initialize tablesorter
//THE TRICK IS TO PUT IN A VARIABLE LOL, SO THAT IT CAN BE UPDATED LATER :D
//THANKS AGAIN MOTTIE
var $tblSorter = $('.tablesorter-blue').tablesorter({               
    widgets: ['zebra'] //no SCROLLER
});

//Code for adding scroller
$tblSorter.trigger('refreshWidgets', [true, true]); //REMOVE ALL WIDGETS
$tblSorter[0].config.widgets = ['zebra', 'scroller']; //ADD ZEBRA & SCROLLER
$tblSorter.trigger('applyWidgets');

//Code for removing scroller
$tblSorter.trigger('refreshWidgets', [true, true]); //REMOVE ALL WIDGETS
$tblSorter[0].config.widgets = ['zebra']; //REMOVE THE SCROLLER, RETAIN ZEBRA ONLY
$tblSorter.trigger('applyWidgets');

Answer 1

For anyone else stumbling upon this question in the future, since v2.25 there is a "removeWidget" method built into TableSorter.

$('.tablesorter').trigger('removeWidget', ['scroller'])

Answer 2

I'm sad to say that the scroller widget needs a lot of work, and bug fixes; this includes removing it from the table while refreshing widgets.

I answered a similar question describing how to remove the scroller here. This is the relevant code you need:

// 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;

---

Update: Oh, I did notice that in the code above, the parameters passed to the "refreshWidgets" were not wrapped in brackets. It should look like this:

$('.tablesorter-blue').trigger('refreshWidgets', [true, true]);

here is a demo, with a slightly modified version of the remove widget code:

$(function () {
    $('#table1').tablesorter();

    var $table2 = $('#table2').tablesorter({
        widgets : ['scroller']
    });

    $('button').click(function(){
        var widgets = $table2[0].config.widgets;
        $table2.trigger('refreshWidgets', [true, true]);
        $table2[0].config.widgets = $.inArray('scroller', widgets) >= 0 ?
            [] : ['scroller'];
        $table2.trigger('applyWidgets');
    });

});