plug-in jquery tablesorter con filtro selezionato ripristinato dopo un aggiornamento ajax

Question

Sto utilizzando il plug-in tablesorter e mi piacerebbe che mantenga il valore del filtro di un elemento selezionato, dopo che un elemento è stato aggiunto tramite ajax.

"La selezione viene aggiornata quando i nuovi dati vengono aggiornati, tuttavia, se un'opzione è stata selezionata dall'utente, quando la selezione viene ripopolata, la selezione degli utenti non viene salvata. quindi fare clic su "Aggiungi riga". L'opzione per "Bruce" viene ripristinata e la tabella viene aggiornata "

Questo è esattamente come questa domanda. Ho anche fatto una domanda nel commento ma non ho ancora ricevuto risposta. Updating a JQuery Tablesorter Filter Function

Ogni pensiero sarebbe molto apprezzato.

Aggiornamento: Sembra che nella versione 3 sia presente un widget per il salvataggio dei filtri. Qualcuno ha funzionato? vedi: 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', ''); 
    } 
}); 

più vecchio esempio

Vai a questa violino (http://jsfiddle.net/4yKMq/) e parte l'esempio di seguito. Grazie

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

Se si salva il contenuto del filtro prima che l'aggiornamento, quindi ripristinarlo, il filtro manterrà è l'impostazione (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'); 

Cercherò di farlo accadere automaticamente.

Answer 2

vorrei provare sortupdate invece di update

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