Magazine Internet

Trier vos tableaux avec Javascript

Publié le 21 août 2008 par Vincent Gache

Table sort - Impression d'écran 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.


Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

LES COMMENTAIRES (2)

Par pinpin
posté le 15 avril à 00:12
Signaler un abus

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.

Par Fabien
posté le 25 novembre à 10:29
Signaler un abus

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.

A propos de l’auteur


Vincent Gache 647 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazine