Il existe différentes manières de proposer des données dans un tableau sur un site internet. Certains comme Smashing Magazine nous proposent de créer de beaux tableaux.
Je vous propose de rajouter une fonctionnalité qui apportera beaucoup à vos tableaux: Le tri des données. Je ne sais pas vous mais quand je tombe sur d'énormes tableaux de type "listing" je déteste devoir chercher longtemps la donnée qui m'intéresse (qui aime???). La majeur partie du temps on rencontre des tableaux avec des en-têtes cliquables qui trient les données. Cependant, ce type de fonctionnalité s'accompagne d'un rechargement de page. Ceci implique donc:
- Une charge serveur plus importante
- Une attente de la part du visiteur
Et javascript alors?
Javascript est un langage permettant de faire exécuter du code côté client (navigateur). Or dans notre cas, nous avons les données et nous souhaitons seulement les triés: Cela semble un travail parfait pour Mr. Javascript non?
Le principe
On ne change pas une équipe qui gagne. Ainsi on souhaite toujours cliquer sur les en-têtes d'un tableau pour le trier.
Le script
Nous en venons au script javascript découvert sur Frequency-decoder. Celui-ci permet en ajoutant des classes "sortable" dans les en-têtes des tableaux (balises TH) de pouvoir trier les données de celui-ci.
L'utilisation est très simple. Voici une liste des classes disponibles:
- sortable,
- sortable-text,
- sortable-date,
- sortable-keep,
- sortable-date-dmy,
- sortable-numeric,
- sortable-currency,
- sortable-sortByTwelveHourTimestamp,
- sortable-sortIPAddress,
- sortable-sortEnglishLonghandDateFormat,
- sortable-sortScientificNotation,
- sortable-sortImage,
- sortable-sortFileSize,
- sortable-sortAlphaNumeric,
- sortable-sortEnglishDateTime
On remarque donc qu'il existe une classe pour chaque type de données gérés par le script. Il suffit donc très simplement d'inclure en premier lieu le script "tablesort.js" dans le header de votre page:
<script type="text/javascript" src="tablesort.js"></script>
Ensuite, l'ajout d'une classe "sortable" dans les en-têtes du tableau comme ceci:
<th class="sortable-numeric">Nombre</th>
Dans ce cas on spécifie que l'en-tête Nombre pourra trié ses données de type numériques.
Alors simple non?
Démo
Avec une petite démonstration du fonctionnement c'est toujours mieux!
Notes
Ce script est compatible Internet Explorer 6 & 7, Opera, Safari,et Firefox.
Jeu de briques
Snake
Pacman
Bubble
LES COMMENTAIRES (2)
posté le 15 avril à 00:12
Bonjour,
Le code est super... A part que - sauf erreur de ma part - il n'est pas capable de faire un tri par dates correct lorsqu'une date commence pas un 0 (zéro), exemple: 04/12/2011 (4 décembre 2011) Dans ce cas là, c'est le mois (12) qui est pris en compte en lieu et place du jour par le JS et non le jour (04).
Bref, ce n'est pas utilisable en production pour un tableau devant être trié par dates.
posté le 25 novembre à 10:29
Merci pour cet article, il m'a été très utile pour la gestion des tableaux sur mon site internet d'actualités et conseils sur la course à pied (plans d'entrainement marathon, calendrier des courses, etc.). Vous pouvez voir un exemple de ce tableau sur ma page calendrier des marathons.