[JS] Supprimer le cache de TableSorter jQuery

jquery-tablesorter

TableSorter est une extension javascript de jQuery qui permet d’utiliser des fonctionnalités de filtre et de tri sur les tables HTML.

Simple à utiliser, je l’utilise dans quasiment tous mes projets Web mais aujourd’hui j’ai été confronté à un problème.

En effet, j’ai une page HTML dans laquelle j’ai une table qui utilise TableSorter.
Les lignes de cette table sont mises à jour chaque minute via une requête ajax.

Le problème est que le plugin TableSorter met en cache chaque ligne (<tr>…</tr>). Du coup si je clique sur une colonne pour la trier après avoir eu 5 rafraichissements, je me retrouve avec toutes les lignes depuis 5 minutes, ce qui rend la table inutilisable.

La solution est donc de supprimer le cache de TableSorter. Malheureusement, cette fonctionnalité n’est pas disponible dans la version originale. Il nous faut donc la modifier.

Pour celà, ouvrez le fichier jquery.tablesorter.js et remplacer:

$this.bind("update", function () {
	var me = this;
	setTimeout(function () {
		// rebuild parsers.
		me.config.parsers = buildParserCache(me, $headers);
		// rebuild the cache map
		cache = buildCache(me);
	}, 1);

par le code suivant:

$this.bind("update", function (e) {
	var me = this;
	setTimeout(function () {
		// rebuild parsers.
		me.config.parsers = buildParserCache(me, $headers);
		// rebuild the cache map
		cache = buildCache(me);
		if(e.resort||e.re_sort) { $(me).trigger("sorton", [config.sortList]); }
		if(e.callback) { e.callback.call(me, config); }
	}, 1);

Ensuite à chaque fois que vous mettez à jours les lignes de votre table, il vous suffit d’appeler:

$("#matable").trigger({type:'update', resort:true});

Et voilà, le cache est désormais supprimé et vous pouvez trier votre table correctement.

Si vous souhaitez vous pouvez télécharger la version modifiée jquery.tablesorter.js

Leave a Reply

Your email address will not be published. Required fields are marked *