Utilisation de jQuery tableSorter sur une table modifiée dynamiquement

Question

J'utilise le plugin jQuery tableSorter sur une page. Malheureusement, la table en cours de tri est modifiée dynamiquement, et quand je trier après l'ajout d'un élément, l'élément disparaît, restaurant la table à l'état dans lequel elle était lors de la création de la tableSorter.

Est-il possible que je puisse forcer tableSorter à réanalyser la page afin que ces nouveaux éléments soient triés correctement?

Answer 1

Je crois que vous pouvez déclencher une mise à jour en utilisant quelque chose comme:

$(table).trigger("update") 

Answer 2

semble que vous avez raison.

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

fait l'affaire. Comme une note, l'API tablesorter a changé à un moment donné, donc ces choses ont été modifiées, ainsi que la liaison d'événements. Mon plus gros problème était de comprendre pourquoi certaines choses fonctionnaient et d'autres pas, et cela était dû à une mauvaise version du plugin, bien qu'il n'y ait pas de distinction évidente.

Answer 3

Le $(table).trigger("update"); jette l'erreur

Uncaught TypeError: Cannot read property 'rows' of undefined 

Donc, il y a une fonction jquery .ajaxStop() où tablesorter() est appelé. Ne pas appeler tablesorter dans .ready()

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

qui a fait le travail

Answer 4

Pour les débutants comme moi qui font face à problème avec table de tri dynamique générée, est la solution ici. La réponse donnée précédemment est correcte, mais où placez-vous cette commande?

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

Vous devez le placer dès que vous avez ajouté les données à la table. Ex dans mon cas

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');