Utilisation de jQuery tableSorter sur une table modifiée dynamiquement
-
05-07-2019 - |
Question
J'utilise le plugin jQuery tableSorter sur une page.
Malheureusement, la table en cours de tri est modifiée dynamiquement et lorsque je trie après avoir ajouté un élément, celui-ci disparaît, ce qui rétablit l'état de la table lors de la création de la tableSorter.
Existe-t-il un moyen de forcer tableSorter à analyser de nouveau la page afin que ces nouveaux éléments soient triés correctement?
La solution
Je pense que vous pouvez déclencher une mise à jour à l'aide de quelque chose comme:
$(table).trigger("update")
Autres conseils
Vous semblez avoir raison.
$(table).trigger("update"); $(table).trigger("appendCache");
fait le tour.
En guise de remarque, l'API tablesorter a changé à un moment donné. Ces éléments ont donc été modifiés, ainsi que la liaison d'événement. Mon plus gros problème consistait à essayer de comprendre pourquoi certaines choses fonctionnaient et d'autres pas, en raison d'une mauvaise version du plugin, même s'il n'y avait pas de distinction évidente.
Le $ (table) .trigger ("update");
génère une erreur
Uncaught TypeError: Cannot read property 'rows' of undefined
Donc, il existe 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
Pour les débutants comme moi confrontés à un problème de tri de la table générée dynamique, voici la solution. Les réponses précédentes sont correctes, 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');