Question

我正在使用tablesorter插件，并希望在通过ajax追加项目之后保留所选项目的过滤器值。

“当新数据更新时，选择会更新，但是，如果用户选择了一个选项，当选择重新填充时，用户选择不会保存。例如，在您的小提琴中 - 单击”布鲁斯“然后单击“添加行”。“Bruce”的选项被重置，表格刷新“

这就像这个问题。我还在评论中提出了一个问题但尚未收到回复。 Updating a JQuery Tablesorter Filter Function

任何想法都会非常感激。

更新：在版本3中看起来有一个过滤器保存小部件。有人有这个工作吗？见：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', '' );
    }
});

较旧的例子

请参阅此小提琴（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');
});

Answer 1

如果您在更新前保存过滤器内容，然后将其还原，过滤器将保留其设置（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');

我会考虑让这种情况自动发生。

Answer 2

我会尝试sortupdate而不是update

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

jquery tablesorter插件，在ajax更新后选择了filter

2 个答案: