GEF
Menú

Paginación

Paginación para resultados de búsqueda u otro tipo de listados que deben ser paginados.

Contenido

Paginación

El módulo tiene que contener en cualquier caso:
- Digito con filete superior para indicar la página de resultados activa, con estilo activo y sin link
- Link para ir a la primera página de resultados
- Link para ir a la anterior página de resultados
- Link para ir a la siguiente página de resultados
- Link para ir a la última página de resultados

Si hay espacio suficiente:
- Un máximo de 5 dígitos de resultados (el visible + 4). Se repartirán proporcionalmente entre anteriores y siguientes, siempre que exístan y haya espacio
- El dígito de la última página de resultados.

Además:
- Si la pantalla es la primera, el link "Anterior" y "Primera" están disabled.
- Si la pantalla es la última, el link "Siguiente" y "Última" están disabled. Ejemplo de primera página de resultados

Y tienes los links a la primera página y a la anterior disabled.


Ejemplo de cuarta página de resultados:

Y tienes los links a la primera página y a la anterior disabled.

Ejemplo de página anteriuor a la antepenúltima página de resultados:


Ejemplo de página antepenúltima página de resultados:


Ejemplo de página última página de resultados:

Y tiene los links a la última página y a la siguiente disabled.



Si existen entre 1 y 6 páginas de resultados y hay espacio suficiente para mostrar todos los digitos:







Si no caben las 2 páginas anteriores a la activa, en primer lugar desaparece el dígito de la última página; si no es suficiente se reduce a 1 o 0 páginas anteriores y siguientes

Paginación dinámica

Para facilitar la implementación de la lógica del paginador, se ha creado un componente javascript capaz de montar todo lo necesario para que este, funcione correctamente. Además de definir el atributo data-pagination, se deben definir los siguientes atributos, los cuales además, son obligatorios:

  • Atributo data-pagination-current (número): Indica la página en la que se encuentra el usuario, por defecto, debe ser 1.
  • Atributo data-pagination-total (número): Indica el total de páginas que tiene el paginador
  • Atributo data-pagination-href-template (url con formato: https://uoc.edu/news/page/{number}): Este texto contiene la url de las páginas en la cual, el campo de texto {number} será transformado al número de página que corresponda dentro del paginador.

Paginación dinámica

<nav data-pagination data-pagination-current="3" data-pagination-total="5" data-pagination-href-template="https://www.uoc.edu/opencms_portal2/opencms/ES/news/actualitat/list.html?resultsPerPage=12&amp;displayPages=5&amp;currentPage={number}"></nav>

<nav data-pagination data-pagination-current="1" data-pagination-total="1" data-pagination-href-template="https://www.uoc.edu/opencms_portal2/opencms/ES/news/actualitat/list.html?resultsPerPage=12&amp;displayPages=5&amp;currentPage={number}"></nav>

<nav data-pagination data-pagination-current="24" data-pagination-total="30" data-pagination-href-template="https://www.uoc.edu/opencms_portal2/opencms/ES/news/actualitat/list.html?resultsPerPage=12&amp;displayPages=5&amp;currentPage={number}"></nav>

<nav data-pagination data-pagination-current="30" data-pagination-total="30" data-pagination-href-template="https://www.uoc.edu/opencms_portal2/opencms/ES/news/actualitat/list.html?resultsPerPage=12&amp;displayPages=5&amp;currentPage={number}"></nav>
Subir