Ayuda:Tablas ordenables

Las tablas pueden tener la opción de ordenar sus filas según el tema de una columna determinada. Esto se hace añadiendo class="sortable".

Ten en cuenta que las tablas ordenables usan JavaScript para realizar su función, y que actualmente no está soportado en la piel de móvil. Si quieres ordenar por varias columnas, mantén pulsada la tecla Shift cuando ordenes la segunda columna.

Lo básico

Hacer que una tabla sea ordenable es fácil ya que lo único que hace falta es añadir la clase "sortable". Sin embargo, en algunos casos como ordenar por números o usando un pie de tabla requieren añadir algo más, tal y como se explica más abajo. 

{| class="article-table sortable"
!Primer nombre
!Apellido
!Color favorito
|-
|Martín
|Esteban
|Pardo
|-
|Esteban
|Salvador
|Blanco
|-
|Salvador
|Martín
|Rojo
|}

da como resultado:

Primer nombre Apellido Color favorito
Martín Esteban Pardo
Esteban Salvador Blanco
Salvador Martín Rojo

Ordenación avanzada

Ordenación por tipo

Por defecto las columnas se ordenan por orden ASCII. En la mayoría de los casos esto funciona bien así, pero puede ser un problema porque al ordenar números, como 10, 20, 100, aparecerían así: 10, 100, 20 (ya que se ordenan por el primer carácter en vez de numéricamente). Esto se soluciona usando el atributo data-sort-type en la cabecera de la columna.

data-sort-type"…" puede contener diferentes valores, pero los más comunes son:

  • text
  • number - para valores numéricos, puntos, comas, espacios, "+", o "-".
  • currency - para números con el símbolo de las monedas $, £, €, o ¥ delante (ejemplo: $100, ¥10000)
  • date

Ten en cuenta que si en cada celda de la columna no está el valor adecuado al tipo de dato, existe la posibilidad de que toda la columna se ordene según el orden establecido por defecto.

Ejemplo: 

{| class="article-table sortable"
!Por defecto
!data-sort-type="number"|Número
!data-sort-type="currency"|Moneda
|-
|!@#$%
|10
|$23
|-
|10000
|20
|¥54
|-
|Manzanas
|100
|£345
|-
|Plátanos
|200
|€999
|}

da como resultado:

Por defecto Número Moneda
!@#$% 10 $23
10000 20 ¥54
Manzanas 100 £345
Plátanos 200 €999

Ordenación por valor

Algunas veces lo que quieres mostrar en una columna no se corresponde con el orden que te gustaría. Para estos casos se utiliza data-sort-value="…".

Ejemplo: 

{| class="article-table sortable"
!Consola
!Color
!Cantidad
|-
|Dreamcast
|Blanco
| data-sort-value="5"|Cinco
|-
|iPad
|Blanco
| data-sort-value="0"|Cero
|-
|Xbox
|Verde
| data-sort-value="8"|Ocho
|}

da como resultado:

Consola Color Cantidad
Dreamcast Blanco Cinco
iPad Blanco Cero
Xbox Verde Ocho

Fecha

{| class="article-table sortable"
|-
! data-sort-type="date" | Día, Mes, y Año
|-
| 21 Dic 1905
|-
| 17 Ene 1950
|-
| 14 May 2014
|-
| 8 Ago 1966
|}

This results in:

Día, Mes, y Año
21 Dic 1905
17 Ene 1950
14 May 2014
8 Ago 1966

Columnas no ordenables

Si tienes una tabla en la que quieres que haya una columna que no se pueda ordenar, puedes hacerlo usando la clase unsortable en su cabecera.

Ejemplo: 

{| class="article-table sortable"
|-
!Juego
!Tema
! class="unsortable" | Puntuación
|-
|Pocket League Story
|fútbol
|☆☆
|-
|Game Dev Story
|vidya gamez
|☆☆☆
|-
|Grand Prix Story
| coches
|☆
|}

da como resultado:

Juego Tema Puntuación
Pocket League Story fútbol ☆☆
Game Dev Story vidya gamez ☆☆☆
Grand Prix Story coches ☆

Pie de tabla

Si no quieres que la última fila de la tabla se pueda ordenar, como las filas usadas para mostrar las cantidades totales, puedes hacerlo añadiendo class="sortbottom" a la fila.

Ejemplo: 

{| class="article-table sortable"
!Nombre
!Género
!Edad
|-
|Marta
|Femenino
|12
|-
|Pedro
|Masculino
|23
|-
|Ana
| Femenino
|34
|- class="sortbottom"
!colspan="2"|Media
|23
|}

da como resultado:

Nombre Género Edad
Marta Femenino 12
Pedro Masculino 23
Ana Femenino 34
Media 23

Ver también

Ayuda y comentarios