FANDOM


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 actuellement pas avec l'apparence mobile. Si vous souhaitez trier sur plusieurs colonnes, maintenez la touche Shift enfoncée quand vous triez la deuxième colonne.

BasesModifier

Réaliser un tableau triable est simple puisque il n'est nécessaire que d'ajouter la classe sortable. Toutefois, certaines situations, comme le tri sur des nombres ou en utilisant un pied de tableau, nécessitent plus de code, comme détaillé plus loin.

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

donne :

Prénom Nom Couleur préférée
Ben Benny Marron
John Smith Vert
Smith John Marron

Tri avancéModifier

data-sort-typeModifier

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="..." peut contenir différentes valeurs possibles, mais les plus courantes sont :

  • text
  • number - Attend une valeur numérique, des points, des virgules, des espaces, « + » ou « - ».
  • currency - Attend un nombre avec $, £, € ou ¥ devant (exemple : $100, ¥10000)
  • date

Veuillez noter que si une des cellules de la colonne ne contient pas une valeur avec le bon type, il est fort probable que le tri de la colonne entière revienne au tri par défaut.

Exemple :

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

donne :

Défaut Nombre Monnaie
!@#$% 10 $23
10000 20 ¥54
Pomme 100 £345
Banane 200 €999

data-sort-valueModifier

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 :

{| 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
|}

donne :

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

Colonnes non triablesModifier

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
|☆
|}

donne :

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

Pied de tableauModifier

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
!Age
|-
|Amanda
|Féminin
|12
|-
|Bill
|Masculin
|23
|-
|Cathryn
|Masculin
|34
|- class="sortbottom"
!colspan="2"|Moyenne
|23
|}

donne :

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

Voir aussiModifier

Plus d'aideModifier

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