|
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.
Nom |
Prénom |
Moyenne
de l'année |
Date de
naissance |
Lapin |
Pierre |
12 |
21/04/1977 |
Lapin |
Bugs |
7 |
05/02/1981 |
Ewili |
Arnold |
15 |
10/11/1975 |
Andclaïde |
Bonnie |
13 |
27/06/1980 |
Hiver |
Ophelia |
19 |
01/02/1973 |
Etné |
Bernard |
17 |
03/12/1980 |
|