jquery tablesorter插件與過濾器選擇重置後ajax更新

Question

我使用tablesorter插件，並希望它保持所選項目的過濾器值後，通過ajax附加一個項目。

「當新數據得到更新時，select會被更新，但是，如果用戶選擇了某個選項，當select被重新填充時，用戶選擇不會被保存，例如，在您的小提琴中 - 單擊」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');