Jquery tablesorter plugin with selected reset filter after ajax update

I use the tablesorter plugin and would like it to keep the filter value for the selected item after the item has been added via ajax.

"The selection is updated when new data is updated, however, if the option was selected by the user when the selection is populated, the selection of users will not be saved. For example, in your Fiddle - click" Bruce ", then click" Add row ". The parameter" Bruce "- reset, and the table is updated "

This is exactly the same as this question. I also asked a question in a comment, but have not heard it yet. Tablesorter jQuery Filter Feature Update

Any thoughts would be greatly appreciated.

Update: it looks like version 3 has a filter save widget. Has anyone got this job? 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', '');
    }
});

Old example

(http://jsfiddle.net/4yKMq/) .

$(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');
});
+5
2

, , (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');

, .

+3

sortupdate update

    $('table')
    .find('tbody').append(newRow)
    .trigger('sortupdate');
0

All Articles