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.