Aggiornamento del plugin jQuery Tablesorter dopo aver rimosso una riga dal DOM

Ho del codice al momento che nasconde una riga che viene cancellata e quindi la rimuove usando la funzione .remove ().

Tuttavia ho difficoltà a farlo rimanere “cancellato” come ogni volta che aggiorno il plugin del cercapersone ordinato in tabella o il plugin del filtro che sto usando .. le righe cancellate riappaiono come sono ovviamente memorizzate nella cache.

Il codice attuale è semplicemente semplice con l’aggiornamento dei widget al momento

$('.deleteMAP').live("click", function(){ $(this).closest('tr').css('fast', function() { $(this).remove(); $(".tablesorter").trigger("update"); $(".tablesorter").trigger("applyWidgets"); }); }) 

Esiste comunque la possibilità di rimuovere la “riga” dalla cache del plug-in del cercapersone e anche il plug-in di tablesorter in modo tale che quando aggiorno la tabella per riflettere il fatto che una riga è stata rimossa non riappare dal morto via la cache!

    Ho trovato una soluzione che ha funzionato per me:

     var usersTable = $(".tablesorter"); usersTable.trigger("update") .trigger("sorton", [usersTable.get(0).config.sortList]) .trigger("appendCache") .trigger("applyWidgets"); 

    Metti questo dopo il posto in cui hai modificato il tavolo.

    Dopo alcuni tentativi di risolvere questo problema, concludo che i problemi sorgono dall’uso combinato di jQuery Tablesorter + jQuery TablesorterPager. Senza il cercapersone rimuovere la riga e fare e “aggiornare” è sufficiente.

    Quando includi anche il cercapersone diventa molto più difficile farlo correttamente (come hai notato correttamente ci sono alcuni problemi di cache).

    Ma la ragione principale del tuo problema è che jQuery Tablesorter non è pensato per essere usato per le tabelle che intendi modificare (nel senso di aggiungere / rimuovere righe). E questo si applica ancora di più quando si utilizza TablesorterPager. Basta rileggere la descrizione di jQuery Tablesorter

    tablesorter è un plugin jQuery per trasformare una tabella HTML standard con tag THEAD e TBODY in una tabella ordinabile senza aggiornamento della pagina.

    Un campo di applicazione chiaro e conciso per TableSorter. Non menziona nemmeno ajax, modifica, rimozione, aggiunta, ….. o termini simili nella pagina. È solo per ordinare una tabella statica.

    Quindi la vera soluzione è … iniziare a cercare un altro plugin “Table” jQuery che sia stato costruito dall’inizio con l’intenzione / possibilità che la tabella possa essere modificata. E che supporta questo di default (rimuovendo, aggiungendo, ….)


    Ok comunque ecco la soluzione per:

    jQuery Tablesorter + TablesorterPager rimuovi righe (TR)

    Copia-incolla rapida del codice sorgente javascript (HTML basato sull’esempio TablesorterPager )

     // "borrowed" from John Resig: Javascript Array Remove // http://ejohn.org/blog/javascript-array-remove/ Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); }; //repopulate table with data from rowCache function repopulateTableBody(tbl) { //aka cleanTableBody from TableSorter code if($.browser.msie) { function empty() { while ( this.firstChild ) this.removeChild( this.firstChild ); } empty.apply(tbl.tBodies[0]); } else { tbl.tBodies[0].innerHTML = ""; } jQuery.each(tbl.config.rowsCopy, function() { tbl.tBodies[0].appendChild(this.get(0)); }); } //removes the passed in row and updates the tablesorter+pager function remove(tr, table) { //pager modifies actual DOM table to have only #pagesize TR's //thus we need to repopulate from the cache first repopulateTableBody(table.get(0)); var index = $("tr", table).index(tr)-2; var c = table.get(0).config; tr.remove(); //remove row from cache too c.rowsCopy.remove(index); c.totalRows = c.rowsCopy.length; c.totalPages = Math.ceil(c.totalRows / config.size); //now update table.trigger("update"); //simulate user switches page to get pager to update too index = c.page < c.totalPages-1; $(".next").trigger("click"); if(index) $(".prev").trigger("click"); } $(function() { var table; //make all students with Major Languages removable $('table td:contains("Languages")').css("background-color", "red").live("click", function() { remove($(this).parents('tr').eq(0), table); }); //create tablesorter+pager // CHANGED HERE OOPS // var table = $("table#tablesorter"); table = $("table#tablesorter"); table.tablesorter( { sortList: [ [0,0], [2,1] ] } ) .tablesorterPager( { container: $("#pager")} ); }); 

    Ho creato una pagina di prova per te con la mia soluzione (fai clic sul TD rosso == rimuovendo quella riga).

    http://jsbin.com/uburo ( http://jsbin.com/uburo/edit per l'origine)

    Se la domanda rimane su come / perché / .... Commento

    Le cose diventano complicate quando si usano sia i plugin tablesorterpager che tablesorterfilter – soluzione con:

     $("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets"); 

    funziona solo per il cercapersone, il filtro ha un’altra cache. Ho cercato una soluzione per quasi 2 ore, finalmente ho scritto qualcosa del genere:

     $("#deleteRowButton").click( function(){ // index of row which will be deleted var index = $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').index(); // table with tablesorter var table = document.getElementById( 'gridTable' ).config.cache.row; // deleting row $('#gridTable tr[rel="'+$("#removeThisID").val()+'"]').remove(); // truly DELETING row, not only mark as deleted - after this list of rows should look like [tr], [tr], [tr], undefined, [tr], ... delete( table[index] ); // tablesorter things $("#gridTable").trigger("update").trigger("appendCache").trigger("applyWidgets"); }); 

    Sto cancellando una riga che ha un attributo rel uguale al valore input # removeThisID.

    Ora è il momento di modificare il plugin tablesorterfilter. Nella funzione doFilter, trova le linee:

     // Walk through all of the table's rows and search. // Rows which match the string will be pushed into the resultRows array. var allRows = table.config.cache.row; var resultRows = []; 

    e sostituirli con:

     // Walk through all of the table's rows and search. // Rows which match the string will be pushed into the resultRows array. var allRows = table.config.cache.row; // refresh cache 'by hand' var newcache = new Array(); var i = 0; for( var a in allRows ) { newcache[i] = allRows[a]; i++; } allRows = newcache; var resultRows = []; 

    È tutto…

    saluti forma Polonia 🙂

    Questo sembra un approccio strano, ma in realtà ha funzionato per me. La tabella esegue il rendering e il cercapersone funziona correttamente.

     $("#tabeBodyId").empty(); $("#tableId colgroup").remove(); //Update table(done using Ajax) $("#tableId").tablesorter({widthFixed: true}).tablesorterPager({container: $("#pager")}); 

    La soluzione jitter ha funzionato quasi per me anche se mancava una riga per l’aggiornamento (vedi il codice sotto). Ho esteso il codice per consentire di inserire nuovi TR in tabella.

    Ho giocato in giro e funziona per me sotto FFox, non ho controllato IExplorer. Comunque c’è un bug che non ho ancora potuto correggere: se aggiungi un nuovo TR e poi provi ad eliminarlo, non verrà cancellato dalla tabella 🙁

     // "borrowed" from John Resig: Javascript Array Remove // http://ejohn.org/blog/javascript-array-remove/ Array.prototype.remove = function(from, to) { var rest = this.slice((to || from) + 1 || this.length); this.length = from < 0 ? this.length + from : from; return this.push.apply(this, rest); }; //repopulate table with data from rowCache function repopulateTableBody(tbl) { //aka cleanTableBody from TableSorter code if($.browser.msie) { function empty() { while ( this.firstChild ) this.removeChild( this.firstChild ); } empty.apply(tbl.tBodies[0]); } else { tbl.tBodies[0].innerHTML = ""; } jQuery.each(tbl.config.rowsCopy, function() { tbl.tBodies[0].appendChild(this.get(0)); }); } //removes the passed in row and updates the tablesorter+pager function tablesorter_remove(tr, table) { //pager modifies actual DOM table to have only #pagesize TR's //thus we need to repopulate from the cache first repopulateTableBody(table.get(0)); var index = $("tr", table).index(tr)-2; var c = table.get(0).config; tr.remove(); //remove row from cache too c.rowsCopy.remove(index); c.totalRows = c.rowsCopy.length; c.totalPages = Math.ceil(c.totalRows / config.size); //now update table.trigger("update"); table.trigger("appendCache"); //simulate user switches page to get pager to update too index = c.page < c.totalPages-1; $(".next").trigger("click"); if(index) $(".prev").trigger("click"); } function tablesorter_add(tr, table) { //pager modifies actual DOM table to have only #pagesize TR's //thus we need to repopulate from the cache first repopulateTableBody(table.get(0)); table.append(tr); //add row to cache too var c = table.get(0).config; c.totalRows = c.rowsCopy.length; c.totalPages = Math.ceil(c.totalRows / config.size); //now update table.trigger("update"); table.trigger("appendCache"); //simulate user switches page to get pager to update too index = c.page < c.totalPages-1; $(".next").trigger("click"); if(index) $(".prev").trigger("click"); //Set previous sorting method var sorting = c.sortList; if(sorting == '') sorting = [[0,0]]; table.trigger("sorton", [sorting]); } 

    E puoi usare è come segue:

    Aggiungi un nuovo TR con HTML complesso al suo interno:

     tablesorter_add(''+data.genus+''+data.species+'', $("#orchid_list")); 

    Rimuovi qualsiasi TR:

     tablesorter_remove($("#"+orchid_id),$("#orchid_list")); 

    La mia tabella di esempio semplificata:

     
    Género Especie
    Amitostigma capitatum
    Amitostigma tetralobum

    Meglio usare table.splice (index, 1); di delete (tabella [indice]) ;! “Elimina” fa solo un elemento vuoto dell’array, ma non completamente cancellato. Mi scusi per il mio inglese! =)

    Si prega di dare un’occhiata a fork Motties tablesorter. Ha fatto un esempio per l’aggiunta / rimozione di righe quando si utilizza il plug-in di tabelle e di pager. http://mottie.github.com/tablesorter/docs/example-pager.html