DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Paginación

Navegación

La paginación se emplea cuando dividimos el contenido de una página para no abrumar, esto dará una idea de qué cantidad de información está disponible y permitirá saltar fácilmente entre las páginas.

Pagination

Por defecto

Posición de paginación: resultados del 10 - 20 de 64

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "default",
  "idPrefix": "pagination",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "value": "1",
      "text": 1
    },
    {
      "value": "2",
      "text": 2,
      "selected": true
    },
    {
      "value": "3",
      "text": 3
    },
    {
      "value": "4",
      "text": 4
    },
    {
      "value": "5",
      "text": 5
    },
    {
      "value": "6",
      "text": 6
    }
  ],
  "attributes": {
    "aria-label": "Paginación"
  }
}) }}

Estilo select

Usa el parámetro 'hasSelect': true para mostrar la paginación como un Select en vez de botones.

Posición de paginación: resultados del 10 - 20 de 64

Mostrar códigodel ejemplo: Estilo select

Contenido

Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "select-style",
  "hasSelect": true,
  "idPrefix": "pagination-has-select",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "value": "1",
      "text": 1
    },
    {
      "value": "2",
      "text": 2,
      "selected": true
    },
    {
      "value": "3",
      "text": 3
    },
    {
      "value": "4",
      "text": 4
    },
    {
      "value": "5",
      "text": 5
    },
    {
      "value": "6",
      "text": 6
    },
    {
      "value": "7",
      "text": 7
    },
    {
      "value": "8",
      "text": 8
    },
    {
      "value": "9",
      "text": 9
    },
    {
      "value": "10",
      "text": 10
    },
    {
      "value": "11",
      "text": 11
    },
    {
      "value": "12",
      "text": 12
    },
    {
      "value": "13",
      "text": 13
    },
    {
      "value": "14",
      "text": 14
    }
  ],
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "attributes": {
    "aria-label": "Paginación"
  }
}) }}

Con página previa deshabilitada

En este ejemplo 'hasSelect': true y 'hasPrevious': false

Posición de paginación: resultados del 0 - 10 de 64

Mostrar códigodel ejemplo: Con página previa deshabilitada

Contenido

Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "with-previous-page-disabled",
  "hasSelect": true,
  "idPrefix": "pagination-with-previous-page-disabled",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "value": "1",
      "text": 1,
      "selected": true
    },
    {
      "value": "2",
      "text": 2
    },
    {
      "value": "3",
      "text": 3
    },
    {
      "value": "4",
      "text": 4
    },
    {
      "value": "5",
      "text": 5
    },
    {
      "value": "6",
      "text": 6
    }
  ],
  "hasPrevious": false,
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "attributes": {
    "aria-label": "Paginación"
  }
}) }}

Sin página previa

En este ejemplo 'hasSelect': true y 'showPrevious': false

Posición de paginación: resultados del 0 - 10 de 64

Mostrar códigodel ejemplo: Sin página previa

Contenido

Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "without-previous-page",
  "hasSelect": true,
  "idPrefix": "pagination-without-previous-page",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "value": "1",
      "text": 1,
      "selected": true
    },
    {
      "value": "2",
      "text": 2
    },
    {
      "value": "3",
      "text": 3
    },
    {
      "value": "4",
      "text": 4
    },
    {
      "value": "5",
      "text": 5
    },
    {
      "value": "6",
      "text": 6
    }
  ],
  "showPrevious": false,
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "attributes": {
    "aria-label": "Paginación"
  }
}) }}

Con página primera y última

En este ejemplo 'hasSelect': true, 'showFirst': true y 'showLast': true

Posición de paginación: resultados del 10 - 20 de 64

Mostrar códigodel ejemplo: Con página primera y última

Contenido

Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "without-previous-page-disabled",
  "hasSelect": true,
  "idPrefix": "pagination-without-previous-page-disabled",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "value": "1",
      "text": 1
    },
    {
      "value": "2",
      "text": 2,
      "selected": true
    },
    {
      "value": "3",
      "text": 3
    },
    {
      "value": "4",
      "text": 4
    },
    {
      "value": "5",
      "text": 5
    },
    {
      "value": "6",
      "text": 6
    }
  ],
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "showFirst": true,
  "showLast": true,
  "firstText": "Primera",
  "lastText": "Última",
  "attributes": {
    "aria-label": "Paginación"
  }
}) }}

Con página primera deshabilitada y última

En este ejemplo 'hasSelect': true, 'hasPrevious': false, 'showFirst': true y 'hasFirst': false

Posición de paginación: resultados del 0 - 10 de 64

Mostrar códigodel ejemplo: Con página primera deshabilitada y última

Contenido

Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "select-style-2",
  "hasSelect": true,
  "idPrefix": "pagination-has-select-2",
  "totalItems": "64",
  "itemsPerPage": "10",
  "items": [
    {
      "value": "1",
      "text": 1,
      "selected": true
    },
    {
      "value": "2",
      "text": 2
    },
    {
      "value": "3",
      "text": 3
    },
    {
      "value": "4",
      "text": 4
    },
    {
      "value": "5",
      "text": 5
    },
    {
      "value": "6",
      "text": 6
    },
    {
      "value": "7",
      "text": 7
    },
    {
      "value": "8",
      "text": 8
    },
    {
      "value": "9",
      "text": 9
    },
    {
      "value": "10",
      "text": 10
    },
    {
      "value": "11",
      "text": 11
    },
    {
      "value": "12",
      "text": 12
    },
    {
      "value": "13",
      "text": 13
    },
    {
      "value": "14",
      "text": 14
    }
  ],
  "hasPrevious": false,
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "showFirst": true,
  "showLast": true,
  "hasFirst": false,
  "firstText": "Primera",
  "lastText": "Última",
  "attributes": {
    "aria-label": "Paginación"
  }
}) }}

Con itemsperpageselector

Usa el parámetro itemsPerPageSelector para mostrar un select que permite elegir el número de items por página, a la derecha.

Posición de paginación: resultados del 10 - 20 de 64

Mostrar códigodel ejemplo: Con itemsperpageselector

Contenido

Nunjucks macro
{% from "components/pagination/_macro.pagination.njk" import componentPagination %}
{{ componentPagination({
  "id": "with-items-per-page-selector",
  "idPrefix": "with-items-per-page-selector",
  "totalItems": "64",
  "itemsPerPage": "10",
  "hasSelect": true,
  "itemsPerPageSelector": {
    "items": [
      {
        "value": "10",
        "text": "10",
        "selected": true
      },
      {
        "value": "25",
        "text": "25"
      },
      {
        "value": "50",
        "text": "50"
      },
      {
        "value": "75",
        "text": "75"
      },
      {
        "value": "100",
        "text": "100"
      }
    ]
  },
  "items": [
    {
      "value": "1",
      "text": 1
    },
    {
      "value": "2",
      "text": 2,
      "selected": true
    },
    {
      "value": "3",
      "text": 3
    },
    {
      "value": "4",
      "text": 4
    },
    {
      "value": "5",
      "text": 5
    },
    {
      "value": "6",
      "text": 6
    }
  ],
  "hasPrevious": false,
  "hasNext": true,
  "previousText": "Anterior",
  "nextText": "Siguiente",
  "attributes": {
    "aria-label": "Paginación"
  }
}) }}