Forum

Réagissez dans les forums de JDN Développeurs

Un tableau permet de présenter des données de manière prévisible et efficace, mais l'ordre de présentation ne correspond pas toujours à ce qu'attend le lecteur, et il serait dommage de se limiter à des tableaux statiques sur une page Web, où l'on est désormais habitué à manipuler l'information de manière dynamique...

Le problème du tri de colonnes dans les tableaux de données a été abordé depuis que JavaScript existe. De nombreuses méthodes sont disponibles, plusieurs pages étant souvent nécessaires pour présenter les techniques utilisées.

Nous avons choisi une solution directement utilisable. Celle-ci a été développée par Stuart Langridge et implémente "simplement" la méthode sort() de l'objet Array() de JavaScript au sein du Document Object Model (DOM). Plus précisément, il utilise le tableau multidimensionnel rows[] du DOM, où il trie chaque colonne.

L'intérêt de ce script en particulier est sa simplicité d'application à un tableau déjà existant, en ajoutant aux entêtes (balises TH) un lien permettant de trier ladite colonne dans un sens, puis dans l'autre. En revanche, son fonctionnement sous IE6/Win est aléatoire, selon l'imbrication de la table visée...

Pour ce faire, il suffit d'ajouter un appel vers le script dans le HEAD de la page :

<script type="text/javascript" src="sorttable.js"></script>

Puis de donner à la table un id (unique, donc) et de lui assigner la classe "sortable" :

<table class="sortable" id="youhou">

Le résultat : des liens qui apparaissent et des colonnes que l'on peut trier.