Paginación

Definición

Este componente permite recorrer un listado de elementos de forma ordenada, distribuyéndolos en distintas páginas con una cantidad limitada de recursos.

Anatomía

Las partes del componente son:

1. Botones de avance (anterior y siguiente): Permiten avanzar a la siguiente página o retroceder a la anterior
2. Números de página: Permiten acceder directamente a una página concreta
3. Elipsis: Se utilizan para marcar saltos en la secuencia numérica de páginas.
4. Número de elementos por página (opcional): Muestra el número actual de elementos que aparecen por página y permite modificarlo.

Tipos

Por defecto

Pautas de uso

Deshabilita los botones anterior y siguiente cuando no se puedan utilizar

Los botones anterior y siguiente deben aparecer deshabilitados (no ocultos) si no se puede avanzar en la dirección correspondiente (es decir, en la primera página de resultados y en la última).

Muestra información sobre la página en la que te encuentras

El paginador debe incluir:

• el número de página actual, con un estilo identificable
• la página anterior y siguiente (en su caso)
• la primera y la última página de la secuencia

No incluyas más de cinco números de página en total, y procura que el número de página actual quede centrado. 

Si para cumplir estas reglas necesitas incluir un salto en la secuencia numérica de páginas, incluye una elipsis.

Permite ajustar cuántos elementos se muestran por página

Procura que el número de elementos por página se ajuste a las expectativas de quienes consulten el listado. Cuando sea relevante, incluye una funcionalidad para cambiar el número de elementos por página:

• En el caso de que la secuencia contenga habitualmente menos de 150 elementos será un enlace sencillo con la opción "Ver todos". En la página de "Ver todos", oculta el paginador.
• En el caso de que la secuencia contenga más de 150 elementos, se presentará un selector con dos opciones, el número por defecto (p.ej. "20") y un número mayor (100).

Componentes relacionados

Similar:

• Asistente de pasos: Si necesitas navegar entre los pasos de un flujo

Forma parte de:

• Buscador avanzado
• Buscador facetado

Recursos asociados al componente

Implementación:

Storybook (solo accesible desde la RCJA)

Control de versiones