tablesorter filter plugin throws error "Cannot Read property '$table' of undefined

Question

I'm trying to use the tablesorter plugin for jQuery along with the filter widget. It results in the error mentioned in the title. It goes to line 374 in jquery.tablesorter.widgets.js which looks like this:

if (!c.$table.hasClass('hasFilters')) {

Here is the whole filter widget from the file:

// Widget: filter
// **************************
ts.addWidget({
    id: "filter",
    priority: 50,
    options : {
        filter_childRows     : false, // if true, filter includes child row content in the search
        filter_columnFilters : true,  // if true, a filter will be added to the top of each table column
        filter_cssFilter     : '',    // css class name added to the filter row & each input in the row (tablesorter-filter is ALWAYS added)
        filter_external      : '',    // jQuery selector string (or jQuery object) of external filters
        filter_filteredRow   : 'filtered', // class added to filtered rows; needed by pager plugin
        filter_formatter     : null,  // add custom filter elements to the filter row
        filter_functions     : null,  // add custom filter functions using this option
        filter_hideEmpty     : true,  // hide filter row when table is empty
        filter_hideFilters   : false, // collapse filter row when mouse leaves the area
        filter_ignoreCase    : true,  // if true, make all searches case-insensitive
        filter_liveSearch    : true,  // if true, search column content while the user types (with a delay)
        filter_onlyAvail     : 'filter-onlyAvail', // a header with a select dropdown & this class name will only show available (visible) options within the drop down
        filter_placeholder   : { search : '', select : '' }, // default placeholder text (overridden by any header "data-placeholder" setting)
        filter_reset         : null,  // jQuery selector string of an element used to reset the filters
        filter_saveFilters   : false, // Use the $.tablesorter.storage utility to save the most recent filters
        filter_searchDelay   : 300,   // typing delay in milliseconds before starting a search
        filter_selectSource  : null,  // include a function to return an array of values to be added to the column filter select
        filter_startsWith    : false, // if true, filter start from the beginning of the cell contents
        filter_useParsedData : false, // filter all data using parsed content
        filter_serversideFiltering : false, // if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.
        filter_defaultAttrib : 'data-value' // data attribute in the header cell that contains the default filter value
    },
    format: function(table, c, wo) {
        if (!c.$table.hasClass('hasFilters')) {
            ts.filter.init(table, c, wo);
        }
    },
    remove: function(table, c, wo) {
        var tbodyIndex, $tbody,
            $table = c.$table,
            $tbodies = c.$tbodies;
        $table
            .removeClass('hasFilters')
            // add .tsfilter namespace to all BUT search
            .unbind('addRows updateCell update updateRows updateComplete appendCache filterReset filterEnd search '.split(' ').join(c.namespace + 'filter '))
            .find('.' + ts.css.filterRow).remove();
        for (tbodyIndex = 0; tbodyIndex < $tbodies.length; tbodyIndex++ ) {
            $tbody = ts.processTbody(table, $tbodies.eq(tbodyIndex), true); // remove tbody
            $tbody.children().removeClass(wo.filter_filteredRow).show();
            ts.processTbody(table, $tbody, false); // restore tbody
        }
        if (wo.filter_reset) {
            $(document).undelegate(wo.filter_reset, 'click.tsfilter');
        }
    }
});

Edit: This is how I am calling tablesorter.

$("#messageTable").tablesorter({
                theme: 'blue',
                widthFixed: true,
                widgets: ["zebra", "filter"],
                widgetOptions: {
                    filter_columnFilters: true,
                    filter_hideFilters: true,
                    filter_ignoreCase: true,
                    filter_liveSearch: false,
                    filter_filterRow: 'filtered',
                    filter_searchDelay: 300,
                    filter_serversideFiltering: false
                }
            });

Answer 1

Had this exact problem today, resolved it simply by updating my tablesorter file to the latest version from their website and updating jquery too.