jquery tablesorter plugin with filter selected reset after an ajax update

Question

I am using the tablesorter plugin and would like it to keep the filter value of a selected item, after an item has been appended via ajax.

"The select gets updated when new data gets updated, however, if an option was selected by the user, when the select gets repopulated, that users selection is not saved. For example, in your Fiddle - click "Bruce" then click "Add Row". The option for "Bruce" is reset and the table refreshes"

This is exactly like this question. I also asked a question in the comment but have not heard back yet. Updating a JQuery Tablesorter Filter Function

Any thoughts would be greatly appreciated.

Update: It looks like in version 3 there is a filter save widget. Has anyone got this working? see: https://github.com/Mottie/tablesorter/issues/178

$.tablesorter.addWidget({
    id: 'FilterSave',
    format: function(table, init){
        var sl, time, c = table.config,
            wo = c.widgetOptions,
            ss = wo.FilterSave !== false; // make FilterSave active/inactive; default to true

        var count_filters = $(table).find('input.tablesorter-filter').length;
        var filter = new Array();
        for (var i=0; i 0)
            {
                $(table).trigger('search', [filter]);
            }
        }
    },
    remove: function(table, c, wo){
        // clear storage
        $.tablesorter.storage( table, 'tablesorter-savefilter', '' );
    }
});

Older example

See this fiddle (http://jsfiddle.net/4yKMq/) and part of the example below. Thanks

$(function() {

// call the tablesorter plugin
$("table").tablesorter({
    theme: 'blue',

    // hidden filter input/selects will resize the columns, so try to minimize the change
    widthFixed : true,

    // initialize zebra striping and filter widgets
    widgets: ["zebra", "filter"],

    // headers: { 5: { sorter: false, filter: false } },

    widgetOptions : {

        // css class applied to the table row containing the filters & the inputs within that row
        filter_cssFilter   : 'tablesorter-filter',

        // If there are child rows in the table (rows with class name from "cssChildRow" option)
        // and this option is true and a match is found anywhere in the child row, then it will make that row
        // visible; default is false
        filter_childRows   : false,

        // if true, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
        // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
        filter_hideFilters : false,

        // Set this option to false to make the searches case sensitive
        filter_ignoreCase  : true,

        // jQuery selector string of an element used to reset the filters
        filter_reset : '.reset',

        // Delay in milliseconds before the filter widget starts searching; This option prevents searching for
        // every character while typing and should make searching large tables faster.
        filter_searchDelay : 300,

        // Set this option to true to use the filter to find text from the start of the column
        // So typing in "a" will find "albert" but not "frank", both have a's; default is false
        filter_startsWith  : false,

        // if false, filters are collapsed initially, but can be revealed by hovering over the grey bar immediately
        // below the header row. Additionally, tabbing through the document will open the filter row when an input gets focus
        filter_hideFilters : false,

        // Add select box to 4th column (zero-based index)
        // each option has an associated function that returns a boolean
        // function variables:
        // e = exact text from cell
        // n = normalized value returned by the column parser
        // f = search filter input value
        // i = column index
        filter_functions : {

            // Add select menu to this column
            // set the column value to true, and/or add "filter-select" class name to header
            0 : true,

            // Exact match only
            1 : function(e, n, f, i) {
                return e === f;
            },

            // Add these options to the select dropdown (regex example)
            2 : {
                "A - D" : function(e, n, f, i) { return /^[A-D]/.test(e); },
                "E - H" : function(e, n, f, i) { return /^[E-H]/.test(e); },
                "I - L" : function(e, n, f, i) { return /^[I-L]/.test(e); },
                "M - P" : function(e, n, f, i) { return /^[M-P]/.test(e); },
                "Q - T" : function(e, n, f, i) { return /^[Q-T]/.test(e); },
                "U - X" : function(e, n, f, i) { return /^[U-X]/.test(e); },
                "Y - Z" : function(e, n, f, i) { return /^[Y-Z]/.test(e); }
            },

            // Add these options to the select dropdown (numerical comparison example)
            // Note that only the normalized (n) value will contain numerical data
            // If you use the exact text, you'll need to parse it (parseFloat or parseInt)
            4 : {
                "< $10"      : function(e, n, f, i) { return n < 10; },
                "$10 - $100" : function(e, n, f, i) { return n >= 10 && n <=100; },
                "> $100"     : function(e, n, f, i) { return n > 100; }
            }
        }

    }

});

$('button.add').click(function () {
    var newRow = "<tr><td>James</td><td>Franco</td><td>Hollywood</td><td>31</td><td>$33.33</td><td>13%</td><td>Oct 22, 2010 1:25 PM</td></tr>";
    $('table')
    .find('tbody').append(newRow)
    .trigger('update');
});

Answer 1

If you save the filter content before the update, then restore it, the filter will retain it's setting (demo):

var newRow = "<tr><td>James</td><td>Franco</td><td>Hollywood</td><td>31</td><td>$33.33</td><td>13%</td><td>Oct 22, 2010 1:25 PM</td></tr>",
    // store current filters
    savedFilters = $('table').find('.tablesorter-filter').map(function(){
        return this.value || '';
    }).get();
$('table')
  .find('tbody').append(newRow)
  .trigger('update').end()
  // restore filters
  .find('.tablesorter-filter').each(function(i){
      $(this).val( savedFilters[i] );
  })
  .trigger('search');

I'll look into making this happen automatically.