Pour obtenir de l'aide sur le tri des articles dans les catégories, consultez Paramètres de tri dans Aide:Catégorie.

Les tableaux triables ont la particularité d'être des tableaux dont les lignes peuvent être triées en fonction des valeurs d'une colonne spécifique.

Veuillez noter que les tableaux triables utilisent le JavaScript pour le tri et ne fonctionne pas actuellement avec l'apparence mobile.

Créer un tableau triable[modifier le wikicode]

Il est facile de rendre un tableau triable, puisqu'il suffit d'y ajouter la classe « sortable ». Cependant, certaines situations - comme le tri avec des nombres ou l'utilisation d'un pied de tableau - peuvent nécessiter une saisie supplémentaire, comme expliqué plus bas.

Par exemple :

{| class="article-table sortable"
! Prénom
! Nom
! Couleur préférée
|-
| Ben
| Benny
| Marron
|-
| John
| Smith
| Bleu
|-
| Smith
| John
| Jaune
|-
| Ben
| Jones
| Rouge
|-
| John
| Smythe
| Vert
|-
| Smith
| Johnson
| Marron
|}

Ce qui donne :

Prénom Nom Couleur préférée
Ben Benny Marron
John Smith Bleu
Smith John Jaune
Ben Jones Rouge
John Smythe Vert
Smith Johnson Marron

En cliquant sur les flèches, vous pourrez trier la colonne par ordre numérique puis par ordre alphabétique. Si vous souhaitez trier par plusieurs colonnes, maintenez la touche Maj enfoncée lorsque vous cliquez sur la seconde colonne.

Tri avancé[modifier le wikicode]

Par défaut, les colonnes sont triée par ordre ASCII. Dans la plupart des cas, ce n'est pas un problème, mais ça peut l'être pour trier des nombres, comme 10, 20, 100 seront triés en 10, 100, 20 (comme le tri est effectué sur le premier caractère alpha-numérique, plutôt que numériquement). Cela peut être résolu en utilisant l'attribut data-sort-type sur les en-têtes de colonne.

data-sort-type[modifier le wikicode]

data-sort-type="…" peut être ajouté au niveau de l'en-tête de colonne pour indiquer le type de donnée de la colonne. Plusieurs types sont supportés, mais les plus courantes sont :

  • text - Trie le texte par symboles, chiffres et lettres dans cet ordre.
  • number - Attend une valeur numérique, des points, des virgules, des espaces, « + » ou « - » (ex : +1 234,5). Les autres caractères après le nombre seront ignorés.
  • currency - Attend un nombre avec $, £, € ou ¥ devant (exemple : $1.00, ¥10.000)
  • date - Attend un format date compatible (ex : 25-12-2001, 25 Dec 2001)

Veuillez noter que si le contenu d'une cellule ne correspond pas au type spécifié dans la colonne, il peut être traité comme ayant pour valeur zéro.

Par exemple :

{| class="article-table sortable"
!Défaut
!data-sort-type="number"|Nombre
!data-sort-type="currency"|Monnaie
|-
| !@#$%
| 20
| $231
|-
| 10000
| 10
| ¥55
|-
| Pomme
| 300
| £34
|-
| Banane
| 200
| €999
|}

Ce qui donne :

Défaut Nombre Monnaie
!@#$% 20 $231
10000 10 ¥55
Pomme 300 £34
Banane 200 €999

data-sort-value[modifier le wikicode]

Parfois, ce que vous voulez afficher dans une colonne ne correspond pas à l'ordre de tri que vous souhaitez. Dans ce cas-là data-sort-value="..." est utilisé.

Exemple 1 :

{| class="article-table sortable"
! Console
! Couleur
! Stock
|-
| Dreamcast
| Blanc
| data-sort-value="5" | Cinq
|-
| PS3
| Blanc
| data-sort-value="0" | Zéro
|-
| Xbox
| Vert
| data-sort-value="8" | Huit
|}

Ce qui donne :

Console Couleur Stock
Dreamcast Blanc Cinq
PS3 Blanc Zéro
Xbox Vert Huit

Exemple 2 :

{| class="article-table sortable" style="width: 500px;"
! data-sort-type="text" scope="col" | Fruit
! data-sort-type="currency" scope="col" | Prix moyen (€uro)
! data-sort-type="number" scope="col" style="width:100px" | Valeur marchande des pommes
! data-sort-type="number" scope="col" style="width:100px" | Valeur marchande des citrons
|-
|data-sort-value="Ananas"| [[file:pineappleexample.png|30px]]<br />Ananas
|€3,00
|data-sort-value="15"|[[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]][[fichier:appleexample.png|20px]]
|data-sort-value="7.5"|[[fichier:lemonexample.png|20px]][[fichier:lemonexample.png|20px]][[fichier:lemonexample.png|20px]][[fichier:lemonexample.png|20px]][[fichier:lemonexample.png|20px]][[fichier:lemonexample.png|20px]][[fichier:lemonexample.png|20px]][[fichier:halflemonexample.png|10px]]
|-
|data-sort-value="Pomme"| [[file:appleexample.png|30px]]<br />Pomme
|€0,20
|data-sort-value="0"|N/A
|data-sort-value="0.5"|[[Fichier:halflemonexample.png|10px]]
|-
|data-sort-value="Citron"| [[Fichier:lemonexample.png|30px]]<br />Citron
|€0,40
|data-sort-value="2"|[[Fichier:appleexample.png|20px]][[Fichier:appleexample.png|20px]]
|data-sort-value="0"|N/A
|-
|data-sort-value="Noix de coco"| [[Fichier:coconutexample.png|30px]]<br />Noix de coco
|€1,40
|data-sort-value="7"|[[Fichier:appleexample.png|20px]][[Fichier:appleexample.png|20px]][[Fichier:appleexample.png|20px]][[Fichier:appleexample.png|20px]][[Fichier:appleexample.png|20px]][[Fichier:appleexample.png|20px]][[Fichier:appleexample.png|20px]]
|data-sort-value="3.5"|[[Fichier:lemonexample.png|20px]][[Fichier:lemonexample.png|20px]][[Fichier:lemonexample.png|20px]][[Fichier:halflemonexample.png|10px]]
|}

Ce qui donne :

Fruit Prix moyen (€uro) Valeur marchande des pommes Valeur marchande des citrons
Pineappleexample.png
Ananas
€3,00 Appleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.png Lemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngLemonexample.pngHalflemonexample.png
Appleexample.png
Pomme
€0,20 N/A Halflemonexample.png
Lemonexample.png
Citron
€0,40 Appleexample.pngAppleexample.png N/A
Coconutexample.png
Noix de coco
€1,40 Appleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.pngAppleexample.png Lemonexample.pngLemonexample.pngLemonexample.pngHalflemonexample.png

Tri par date[modifier le wikicode]

{| class="article-table sortable"
|-
! data-sort-type="date" | Jour, mois et année
|-
| 21 décembre 1905
|-
| 17 janvier 1950
|-
| 14 mai 2014
|-
| 8 août 1966
|}

Ce qui donne :

Jour, mois et année
21 décembre 1905
17 janvier 1950
14 mai 2014
8 août 1966

Colonnes non triables[modifier le wikicode]

Si vous avez un tableau pour lequel vous ne souhaitez pas que certaines colonnes soient triables, vous pouvez le faire en ajoutant la classe unsortable à son en-tête.

Exemple :

{| class="article-table sortable"
|-
! Jeu
! Thème
! class="unsortable" | Note
|-
| Pocket League Story
| football
| ☆☆
|-
| Game Dev Story
| jeux vidéo
| ☆☆☆
|-
| Grand Prix Story
| voitures
| ☆
|}

Ce qui donne :

Jeu Thème Note
Pocket League Story football ☆☆
Game Dev Story jeux vidéo ☆☆☆
Grand Prix Story voitures

Pied de tableau[modifier le wikicode]

Si vous ne voulez pas que la dernière ligne d'un tableau soit triée (comme pour une ligne de totale), ce peut être réalisé en ajoutant class="sortbottom" à la ligne.

Exemple :

{| class="article-table sortable"
! Nom
! Genre
! Âge
|-
| Amanda
| Féminin
| 23
|-
| Bill
| Masculin
| 12
|-
| Cathryn
| Masculin
| 34
|- class="sortbottom"
! colspan="2" | Moyenne
| 23
|}

Ce qui donne :

Nom Genre Âge
Amanda Féminin 23
Bill Masculin 12
Cathryn Masculin 34
Moyenne 23

Voir aussi[modifier le wikicode]

Plus d'aide

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.