[Javascript] Tri dynamique de listes (1/3)

Les listes que nous affichons sont généralement pré-triées sur certaines colonnes, et il faut recharger la page pour que l'ordre de tri puisse être modifié. En se basant sur le type Array du javascript et de sa méthode .sort, il est très simple de mettre en place des listes dont le tri s'effectue par simple clic des entêtes de colonne.

---

Principes - Fonctions JavaScript - Exemple

---

PRINCIPES

Les tableaux en javascript sont définis par le type Array. Pour construire la liste nous utiliserons un tableau à 2 dimensions (Array[i][j]) et sa méthode .sort.
Vous pouvez renseigner le tableau de la manière qui vous convient (ASP, PHP, lecture de fichier, ...)

La méthode sort trie l'objet Array existant. Aucun nouvel objet Array n'est créé.
L'argument passé doit être une fonction à 2 arguments retournant l'une des valeurs suivantes :
     - Une valeur négative pour inverser le 1er argument et le 2nd.
     - Une valeur positive pour ne pas inverser les deux arguments.

Cette fonction doit être déclarée de la manière suivante

x1 et x2 sont des arguments 'virtuels', représentant deux 'lignes' du tableau.
On va comparer la valeur de la colonne iColSel de chacune de ces lignes (test entre Array[1][iColSel] et Array[2][iColSel], puis entre Array[1][iColSel] et Array[3][iColSel], ...)

Sort parcourant l'ensemble des lignes pour trier le tableau, il n'est pas nécessaire de passer les arguments x1 et x2 lors de l'appel de la fonction :

La mise en place de ce principe pour construire une liste va nécessiter l'utilisation de plusieurs fonctions :
     - Une fonction construisant la liste à partir de la variable Array
     - Une fonction déclenchant le tri pour une colonne et un type de variable (string, date, ...)
     - Toutes les fonctions de tri nécessaires à traiter les différents type de variables.

Ces fonctions sont détaillées dans la page suivante.