[INFO] Trier les tables à la volée
Posté : 13 mars 2005, 12:50
Voici de quoi faire économiser de précieuses ressources coté serveur pour la gestion du tri des tables, et de quoi ajouter une fonctionnalité très sympa à vos tables statiques:
http://www.kryogenix.org/code/browser/sorttable/
Fonctionnement, étant donné que vous avez une table de cette forme:
Il suffit d'inclure le script téléchargé (<script src="sorttable.js"></script>), et de transformer vos titres en liens utilisables par le script:
<th>TitreX</th>
devient (les parties en rouge sont celles à ajouter):
<th><a href="#" class="sortheader" onclick="ts_resortTable(this)">TitreX<span class="sortarrow"> </span></a></th>
Ben voilà, c'est tout
, en cliquant sur les titres vous pouvez trier votre table selon la colonne (ordres croissants et decroissants s'alternent).
Comme vous le voyez la partie en rouge est fixe, et ne dépend en rien de l'environnement, donc il est très simple de faire un chercher/remplacer pour modifier globalement son code (avec l'expression régulière qui va bien
).
J'ajoute que si vous voulez "pré-trier" votre table, ce n'est pas beaucoup plus compliqué: ajoutez un ID au lien sur le titre de la colonne que vous voulez trier.
Par exemple: <th><a href="#" class="sortheader" onclick="ts_resortTable(this)" id="default_sort">TitreX<span class="sortarrow"> </span></a></th>
Puis triez selon cette colonne avec l'instruction JS ts_resortTable(document.getElementById("default_sort"));
(bien sûr cette instruction doit être placée après la déclaration de la table et l'insertion de sorttable.js).
Voilà, une petite solution très sympathique, testée sous IE/Opera/Firefox.
http://www.kryogenix.org/code/browser/sorttable/
Fonctionnement, étant donné que vous avez une table de cette forme:
Code : Tout sélectionner
<table ...>
<tr><th>Titre1</th><th>Titre2</th>...</tr>
<tr><td>Val1.1</td><td>Val2.1</td>...</tr>
<tr><td>Val1.2</td><td>Val2.2</td>...</tr>
...
</table><th>TitreX</th>
devient (les parties en rouge sont celles à ajouter):
<th><a href="#" class="sortheader" onclick="ts_resortTable(this)">TitreX<span class="sortarrow"> </span></a></th>
Ben voilà, c'est tout
, en cliquant sur les titres vous pouvez trier votre table selon la colonne (ordres croissants et decroissants s'alternent).Comme vous le voyez la partie en rouge est fixe, et ne dépend en rien de l'environnement, donc il est très simple de faire un chercher/remplacer pour modifier globalement son code (avec l'expression régulière qui va bien
).J'ajoute que si vous voulez "pré-trier" votre table, ce n'est pas beaucoup plus compliqué: ajoutez un ID au lien sur le titre de la colonne que vous voulez trier.
Par exemple: <th><a href="#" class="sortheader" onclick="ts_resortTable(this)" id="default_sort">TitreX<span class="sortarrow"> </span></a></th>
Puis triez selon cette colonne avec l'instruction JS ts_resortTable(document.getElementById("default_sort"));
(bien sûr cette instruction doit être placée après la déclaration de la table et l'insertion de sorttable.js).
Voilà, une petite solution très sympathique, testée sous IE/Opera/Firefox.
beni-sois-tu, je m'appretais justement à coder ça.. ça me laissera le temps de mieux fignoler d'autres aspects..