lundi 5 janvier 2009

[javascript] Tri dynamique d'un tableau HTML

Nous entendons par tri dynamique l'action de pouvoir trier le tableau en cliquant sur l'en-tête des colonnes, et ceci sur plusieurs colonnes, par ordre croissant ou décroissant. C'est tout bête, ça prend deux minutes à installer :
- transférer les images (à la racine du site) et les deux fichiers .js sur le serveur
- faire le lien vers eux dans l'en-tête de la page où se trouve le tableau :
<script type="text/javascript" src="/squelettes/javascript/prototype.js"></script>
<script type="text/javascript" src="/squelettes/javascript/sortHTMLTable.js"></script>

- donner une id au tableau en question, par exemple "tri" :
<table id="igm"
- à la fin de la page HTML, après le tableau par exemple, placer l'appel au tri :
<script type="text/javascript"> new sortHTMLTable( 'tri' ); </script>
- admirer le résultat !

Et régler tous les soucis de présentation avec les CSS et l'id tri.

Petit bémol : ça marche partout, sauf dans IE6... mais le tableau s'affiche quand même, sans erreur. Vous pouvez voir un résultat ici.

La source est ici.

0 commentaires: