5

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

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

这和这个问题完全一样。我还在评论中问了一个问题，但还没有收到回复。更新 JQuery Tablesorter 过滤器函数

任何想法将不胜感激。

更新：看起来在版本 3 中有一个过滤器保存小部件。有没有人有这个工作？见：https ://github.com/Mottie/tablesorter/issues/178

$.tablesorter.addWidget({
    id: '过滤保存',
    格式：函数（表，初始化）{
        var sl，时间，c = table.config，
            wo = c.widgetOptions,
            ss = wo.FilterSave !== false; // 使 FilterSave 处于活动状态/非活动状态；默认为真

        var count_filters = $(table).find('input.tablesorter-filter').length;
        var filter = new Array();
        对于 (var i=0; i 0)
            {
                $(table).trigger('search', [filter]);
            }
        }
    },
    删除：函数（表，c，wo）{
        // 清除存储
        $.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');
});
4

2 回答 2

3

如果您在更新前保存过滤器内容，然后将其恢复，过滤器将保留其设置（演示）：

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

我会考虑让这一切自动发生。

于 2013-03-05T04:58:26.807 回答
0

我会尝试sortupdate而不是update

    $('table')
    .find('tbody').append(newRow)
    .trigger('sortupdate');
于 2013-03-05T03:40:47.930 回答