desy-html

Pagination

Mostrar parámetros

Parámetros del componente

              params:
- name: id
  type: string
  required: true
  description: The id of the pagination.
- name: hasSelect
  type: boolean
  required: false
  description: If true, the pagination appearance shows a select to select active page instead of a button group.
- name: ariaLabel
  type: string
  required: true
  description: String to add an aria-label to the nav.
- name: classesContainer
  type: string
  required: false
  description: Classes to add to the container div.
- name: totalItems
  type: string
  required: true
  description: Total number of items.
- name: itemsPerPage
  type: string
  required: true
  description: Number of items per each page.
- name: showPrevious
  type: boolean
  required: false
  description: If true, shows the Previous button if hasSelect is true. Defaults to true.
- name: hasPrevious
  type: boolean
  required: false
  description: If false, the Previous button is disabled. Defaults to true.
- name: previousText
  type: string
  required: false
  description: Text for the previous button. Defaults to "Anterior".
- name: showNext
  type: boolean
  required: false
  description: If true, shows the Next button if hasSelect is true. Defaults to true.
- name: hasNext
  type: boolean
  required: false
  description: If false, the Next button is disabled. Defaults to true.
- name: nextText
  type: string
  required: false
  description: Text for the previous button. Defaults to "Siguiente".
- name: showFirst
  type: boolean
  required: false
  description: If true, shows the First button if hasSelect is true. Defaults to false.
- name: hasFirst
  type: boolean
  required: false
  description: If false, the First button is disabled. Defaults to true.
- name: firstText
  type: string
  required: false
  description: Text for the first button. Defaults to "Primera".
- name: showLast
  type: boolean
  required: false
  description: If true, shows the Last button if hasSelect is true. Defaults to false.
- name: hasLast
  type: boolean
  required: false
  description: If false, the Last button is disabled. Defaults to true.
- name: lastText
  type: string
  required: false
  description: Text for the last button. Defaults to "Última".
- name: itemsPerPageSelector
  type: object
  required: false
  description: Options for a select component to choose number of items per page.
  - name: label
    type: object
    required: true
    description: Label text or HTML by specifying value for either text or html keys.
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
    - name: classes
      type: string
      required: false
      description: Classes to add to the element that acts as label.
  - name: items
    type: array
    required: true
    description: Array of items objects.
    params:
    - name: text
      type: string
      required: true
      description: If `html` is set, this is not required. Text to use within each item. If `html` is provided, the `text` argument will be ignored.
    - name: html
      type: string
      required: true
      description: If `text` is set, this is not required. HTML to use within each item. If `html` is provided, the `text` argument will be ignored.
    - name: id
      type: string
      required: false
      description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
    - name: active
      type: boolean
      required: false
      description: If true, item will be active.
    - name: classes
      type: string
      required: false
      description: Classes to add to the item.
    - name: attributes
      type: object
      required: false
      description: HTML attributes (for example data attributes) to add to the item.
- name: items
  type: array
  required: true
  description: Array of items objects.
  params:
  - name: href
    type: string
    required: true
    description: Item link.
  - name: active
    type: boolean
    required: false
    description: If true, item will be active.
  - name: classes
    type: string
    required: false
    description: Classes to add to the item.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the item.
- name: classes
  type: string
  required: false
  description: Classes to add to the pagination nav container tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the pagination nav container tag.

Por defecto

Posición de paginación: 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.

Selecciona para cargar datos automáticamente

Posición de paginación: 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

Selecciona para cargar datos automáticamente

Posición de paginación: 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

Selecciona para cargar datos automáticamente

Posición de paginación: 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

Selecciona para cargar datos automáticamente

Posición de paginación: 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

Selecciona para cargar datos automáticamente

Posición de paginación: 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.

Selecciona para cargar datos automáticamente

Posición de paginación: 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"
  }
}) }}