reset filter on tablesorter when going back to page and filtered select drop-down returns no records

Question

I am using tablesorter on a page where I display products. One of the column is the status displayed in a drop-down. When I click a product I can edit it and change its status. When I go back to the product list, the list is still filtered which is OK but if the product was the last with this status, the product list is, of course, empty and the drop-down shows no selection because the status does not exist anymore. I want to clear the filter on the drop-down when I get back on the product list page and there is no more product with this status. How can I achieve this?

My code:

<table cellspacing="1" cellpadding="1" id="ProductTable" class="tablesorter">
    <thead>
        <tr>
            <th class="reorder-false reorder-block-left">Product Name</th>
            <th class="">Description</th>
            <th class="filter-select filter-onlyAvail">Status</th>
            <th class="">Status Change Date</th>
        </tr>
    </thead>
    <tbody id="ProductList">
    <tr class="ProductRows" id="P_1906">
        <td ><a style="text-decoration:none" href="/Product/Index/1906">Product #1</a></td>
        <td><span class="">Test #1</span></td>
        <td><span class="">Active</span></td>
        <td><span class="time">2015/07/13 16:41:03</span></td>
    </tr>
    <tr class="ProductRows" id="P_1993">
        <td ><a style="text-decoration:none" href="/Product/Index/1993">Test #2</a></td>
        <td><span class="">Test #2</span></td>
        <td><span class="">Backorder</span></td>
        <td><span class="time">2015/08/25 10:39:23</span></td>
    </tr>
    </tbody>
</table>

$("#ProductTable").tablesorter({
    theme: 'blue',
    widthFixed: false,
    widgets: [ "zebra", "filter", "resizable" ],
    widgetOptions: {
        filter_childRows: false,
        filter_columnFilters: true,
        filter_filteredRow: 'filtered',
        filter_hideFilters: true,
        filter_ignoreCase: true,
        filter_liveSearch: true,
        filter_onlyAvail: 'filter-onlyAvail',
        filter_reset: 'button.reset',
        filter_saveFilters: true,
        filter_searchDelay: 300,
        filter_serversideFiltering: false,
        filter_startsWith: false,
        filter_useParsedData: false,
        filter_defaultAttrib: 'data-value'
    }
});

Thank you.

Answer 1

I made it using the following code:

var FilterCallOnce = false;

    $("#ProductTable").tablesorter({
        theme: 'blue',
        widthFixed: false,
        widgets: [ "zebra", "filter", "resizable" ],
        widgetOptions: {
            filter_childRows: false,
            filter_columnFilters: true,
            filter_filteredRow: 'filtered',
            filter_hideFilters: true,
            filter_ignoreCase: true,
            filter_liveSearch: true,
            filter_onlyAvail: 'filter-onlyAvail',
            filter_reset: 'button.reset',
            filter_saveFilters: true,
            filter_searchDelay: 300,
            filter_serversideFiltering: false,
            filter_startsWith: false,
            filter_useParsedData: false,
            filter_defaultAttrib: 'data-value'
        }
    }).bind('filterEnd', function(e, filter){
        var table = document.getElementById("ProductList");
        var nrow = 0;
        var nfiltered = 0;

        if (FilterCallOnce == false)
        {
            FilterCallOnce = true;

            if (table != null)
            {
                for (var i = 0, row; row = table.rows[i]; i++)
                {
                    nrow++;

                    if (!hasClass(row, 'filtered'))
                        nfiltered++;
                }

                if ((nrow > 0) && (nfiltered == 0))
                    $('#ProductTable').trigger('filterReset');
            }
        }
    });

    function hasClass(element, cls)
    {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }