5

tablesorter プラグインを使用していますが、アイテムが ajax 経由で追加された後、選択したアイテムのフィルター値を保持したいと考えています。

「新しいデータが更新されると選択が更新されますが、ユーザーがオプションを選択した場合、選択が再入力されると、そのユーザーの選択は保存されません。たとえば、フィドルで-「ブルース」をクリックしてから「追加」をクリックします行"。"Bruce" のオプションがリセットされ、テーブルが更新されます"

これはまさにこの質問のようなものです。私もコメントで質問しましたが、まだ返事がありません。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 をアクティブ/非アクティブにします。デフォルトは true

        var count_filters = $(table).find('input.tablesorter-filter').length;
        var フィルター = 新しい配列 ();
        for (var i=0; i 0)
            {
                $(table).trigger('検索', [フィルター]);
            }
        }
    }、
    remove: function(table, 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

更新前にフィルター コンテンツを保存して復元すると、フィルターはその設定を保持します ( 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');

これを自動的に行う方法を検討します。

于 2013-03-05T04:58:26.807 に答える
0

sortupdate代わりに試してみますupdate

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