Utilizzo di jQuery tableSorter su una tabella modificata dinamicamente

Question

Sto usando il plugin jQuery tableSorter su una pagina.

Sfortunatamente, la tabella che viene ordinata viene modificata in modo dinamico e quando eseguo l'ordinamento dopo aver aggiunto un elemento, l'elemento scompare, ripristinando la tabella allo stato in cui si trovava quando è stato creato tableSorter.

Esiste un modo per forzare tableSorter a ripetere la scansione della pagina in modo che questi nuovi elementi vengano ordinati correttamente?

Answer 1

Credo che tu possa attivare un aggiornamento usando qualcosa come:

$(table).trigger("update")

Answer 2

Sembra che tu abbia ragione.

$(table).trigger("update");
$(table).trigger("appendCache");

fa il trucco.

Come nota, l'API tableorter è cambiata ad un certo punto, quindi queste cose sono state cambiate, così come l'associazione degli eventi. Il mio più grande blocco è stato quello di cercare di capire perché alcune cose funzionassero e altre no, ed era dovuto alla presenza di una versione errata del plugin, nonostante non vi fosse alcuna ovvia distinzione.

Answer 3

Il $ (table) .trigger (" update "); genera un errore

    Uncaught TypeError: Cannot read property 'rows' of undefined 

Quindi, esiste una funzione jquery .ajaxStop () dove viene chiamato tablesorter () . Non chiamare tablesorter in .ready()

    jQuery(document).ajaxStop(function(){
      jQuery("#table_name").tablesorter();
    })

che ha svolto il lavoro

Answer 4

Per quei principianti come me che stanno affrontando problemi con l'ordinamento della tabella generata dinamica, ecco la soluzione. La risposta precedentemente fornita è corretta, ma dove si posiziona questo comando?

$('#tableId').tablesorter().trigger('update');

Devi posizionarlo non appena hai aggiunto i dati alla tabella. Ex nel mio caso

var tableData = "<thead><tr><th>Name</th><th>Age</th></thead><tbody><tr><td>Izaki</td><td>24</td><tr><tr><td>Serizawa</td><td>25</td></tr>";
$('#tableId').html('tableData');
$('#tableId').tablesorter().trigger('update');