Uso de jQuery tableSorter en la tabla modificada dinámicamente

Question

Estoy utilizando el plugin jQuery tableSorter en una página.

Desafortunadamente, la tabla que se está ordenando se modifica dinámicamente, y cuando ordeno después de agregar un elemento, el elemento desaparece, restaurando la tabla al estado en que estaba cuando se creó tableSorter.

¿Hay alguna manera de forzar a TableSorter a volver a examinar la página para que estos elementos nuevos estén ordenados correctamente?

Answer 1

Creo que se puede desencadenar una actualización usando algo como:

$(table).trigger("update") 

Answer 2

Parece que son correctos.

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

hace el truco.

Como nota, la API de tablesorter cambió en algún momento, por lo que estas cosas se cambiaron, así como el enlace del evento. Lo que más me molestaba era tratar de descubrir por qué algunas cosas funcionaban y otras no, y era por tener una versión incorrecta del complemento, a pesar de que no había una distinción obvia.

Answer 3

El $(table).trigger("update"); tiros de error

Uncaught TypeError: Cannot read property 'rows' of undefined 

Por lo tanto, hay una función de jQuery .ajaxStop() donde tablesorter() se llama. No llame tablesorter en .ready()

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

el que hizo el trabajo

Answer 4

Para los novatos como yo que se enfrentan problema con mesa de selección generada dinámico, aquí está la solución. La respuesta dada anteriormente es correcta, pero ¿dónde coloca este comando?

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

Debe colocarlo tan pronto como haya agregado los datos a la tabla. Ex en mi 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');