jquery tablesorter plugin z filtrem wybranym resetem po aktualizacji ajax

Question

Używam wtyczki tablesorter i chciałbym, aby zachować wartość filtra wybranego elementu, po dodaniu elementu przez ajax.

"Wybór jest aktualizowany po zaktualizowaniu nowych danych, jeśli jednak użytkownik wybrał opcję, gdy zaznaczenie zostanie ponownie wypełnione, wybór użytkowników nie zostanie zapisany. Na przykład w skrzypcach - kliknij" Bruce " następnie kliknij "Dodaj wiersz". Opcja "Bruce" jest resetowana, a tabela odświeża "

To jest dokładnie to pytanie. Zadałem także pytanie w komentarzu, ale jeszcze nie otrzymałem odpowiedzi. Updating a JQuery Tablesorter Filter Function

Wszelkie przemyślenia będą mile widziane.

Aktualizacja: Wygląda na to, że w wersji 3 istnieje widżet zapisywania filtru. Czy ktoś to działa? patrz: 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', ''); 
    } 
}); 

Starsze przykład

Zobacz ten skrzypce (http://jsfiddle.net/4yKMq/) oraz część poniższym przykładzie. Dzięki

$(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

Jeśli zapiszesz zawartość filtra przed aktualizacją, a następnie przywrócić je, filtr zachowa to ustawienie (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'); 

Zajmę się tym, aby to się stało automatycznie.

Answer 2

chciałbym spróbować sortupdate zamiast update

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