Componentes de Bootstrap

Paginación

Recorre una lista larga dividida en páginas, con la página actual siempre visible.

La paginación deja moverse por las páginas de una lista o una tabla. Muestra la página actual y sus vecinas, y el camino a la anterior y a la siguiente.

Cuándo usarlo

Úsalo

Bajo cada lista y tabla que pueda tener más filas de las que caben: filas por página a la izquierda, el rango y las flechas a la derecha.
Di cuánto hay (“21–40 de 312”) y dónde estás (“Página 2 de 16”).
Ofrece la primera y la última página cuando la lista tiene más de unas pocas páginas.
Guarda la página y las filas por página en la dirección, para que un enlace o una recarga vuelvan al mismo sitio.

No

Paginar menos de dos páginas.
Mostrar todos los números de página de una lista larga.
Usarla para moverse entre los pasos de un proceso; usa pasos.
Ponerla encima y debajo de la misma tabla: debajo basta.

Anatomía

La paginación de una lista es la que usamos en todos los plugins (es la de Filebank): una fila con, a la izquierda, la etiqueta Filas por página y un select pequeño, y a la derecha el rango (“21–40 de 312”), la página (“Página 2 de 16”) y un grupo de cuatro botones de icono pequeños: primera, anterior, siguiente y última. El grupo es de contorno y está unido, con los extremos redondeados; un botón que no se puede usar se desactiva, nunca se oculta, para que el grupo no cambie de ancho.

Las páginas numeradas (pagination, page-item, page-link) son para los sitios donde la persona necesita saltar a una página concreta de una lista corta, y para las páginas propias de Moodle que ya las usan.

Variantes y estados

La paginación de una lista

Paginación de una lista

La primera fila es la versión completa, para listas de muchas filas. La segunda es la versión corta, para una lista que solo avanza (un feed, un registro que carga más). La tercera es la versión con texto, para un flujo donde solo importa la página siguiente.

Páginas numeradas

Páginas numeradas

La paginación propia de Moodle 5.3

Moodle 5.3 tiene su propio componente de paginación (mds-pagination) para los sitios donde Moodle mismo pagina.

Paginación de Moodle 5.3

Comportamiento

Cambiar las filas por página vuelve a la primera página, porque el número de página anterior puede ya no existir.
Los botones son enlaces cuando la página está en la dirección (así se pueden abrir en otra pestaña) y botones cuando la lista se actualiza en el sitio.
Mientras carga la página siguiente, la lista muestra su marcador y el paginador se oculta; vuelve con el nuevo rango.
Tras ir a otra página el foco va al inicio de la lista y se anuncia el nuevo rango (“Mostrando 41–60 de 312”).
Una página que ya no existe (la lista se acortó) muestra la última, nunca una página vacía.

Combinaciones

Combinación	Para qué usarla
Páginas numeradas × pocas páginas	Hasta unas nueve páginas: muéstralas todas, con anterior y siguiente.
Paginador de lista × muchas filas	Filas por página, el rango («21–40 de 312») y las cuatro flechas. Bajo una tabla, dentro de la tarjeta que la contiene.
Anterior / Siguiente × asistente	Dos botones y «Página 3 de 16» para un flujo donde solo importa la página siguiente.
Tamaño	Pequeña bajo una tabla densa, normal en el resto.

Qué cambia Didactika y por qué

Qué cambiamos	Por qué ayuda
El paginador dice «21–40 de 312» en vez de solo numerar páginas	La gente quiere saber cuánto hay, no en qué número de página está.
Las filas por página son un selector junto al recuento	El usuario puede mostrar más filas sin salir de la lista, y la elección está donde está el recuento.
Las flechas son un grupo de botones con icono	Se alinean con el resto de botones y son fáciles de pulsar.
La página actual va rellena y las demás son simples	Hay un «estás aquí» claro.

Clases

Clase	Qué hace
`pagination`	La lista
`pagination-sm`, `pagination-lg`	Más pequeña y más grande
`page-item`, `page-link`	Un elemento y su enlace
`active`, `disabled`	Estado de un elemento
`dd-pager`, `dd-pager-size`, `dd-pager-end`, `dd-pager-range`	La paginación de una lista: filas por página, rango y flechas (Didactika)

En esta versión

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos.

Accesibilidad

El envoltorio es un nav con aria-label.
La página actual lleva aria-current="page".
Un enlace desactivado lleva aria-disabled="true" y tabindex="-1".
Anterior y siguiente llevan palabras o un aria-label, nunca solo una flecha.