1 Pagination

Componentes relativos a paginación

Vamos a ver como se usa cada uno de los componentes.

Pagination

<desy-pagination ...></desy-pagination>

Proporciona un listado de paginas en las que puedes navegar.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción
id	string	Identificador del elemento <pagination>
idPrefix	string	Prefijo de id
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el elemento <pagination>
hasSelect	boolean	Cuando es true se mostrarán en forma de seleccion, si no se mostrará una lista sin select.
classesContainer	string	Contenedor de clases que quieres mostrar en el componente pagination
totalItems	number	Número total de objetos
itemsPerPage	number	Número total de objetos por página
hasPrevious	boolean	Si el botón de anterior esta activado o no
hasNext	boolean	Si el botón de siguiente esta activado o no
hasFirst	boolean	Si el botón de primera esta activado o no
hasLast	boolean	Si el botón de última esta activado o no
showPrevious	boolean	Si el botón de anterior se muestra o no
showNext	boolean	Si el botón de siguiente se muestra o no
showFirst	boolean	Si el botón de primera se muestra o no
showLast	boolean	Si el botón de anterior se muestra o no
previousText	string	Si el botón de última esta activado o no
nextText	string	Texto que se muestra en el botón siguiente
firstText	string	Texto que se muestra en el botón primera
lastText	string	Texto que se muestra en el botón última
hasSelectItemsPerPage	boolean	Indica si hay un selector (listbox) para seleccionar el número de elementos a mostrar por página

Propiedades de accesibilidad

El componente y cada DreadcrumbsData admiten los siguientes parámetros de accesibilidad.

Evento	Tipo	Descripción

Evento	Tipo	Descripción
itemsPerPageChange	number	Número de elementos por página que el usuario elige que haya en la misma a través del selector.

Se permite proyectar contenido dentro de pagination para facilitar su uso. Admite los siguientes componentes:

PaginationListboxLabel

<desy-pagination-listbox-label>...</desy-pagination-listbox-label>

Permite especificar la etiqueta a mostrar en el listbox, requiere la propiedad hasSelectItemsPerPage a true. Si no se específica texto, por defecto mostrará: “Items por página”.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
classes	string	Clases CSS separadas por espacio que se aplicarán sobre el componente.

PaginationListboxLabel

<desy-pagination-item-perpage>...</desy-pagination-item-perpage>

Permite especificar los elementos seleccionables en el listbox, requiere la propiedad hasSelectItemsPerPage a true.

Propiedad	Tipo	Descripción	Obligatorio

Propiedad	Tipo	Descripción	Obligatorio
value	number	Indica el valor que va a tener el elemento del listbox y así actualizar el número de elementos por página.

Implementación listado

<desy-pagination 
  [itemsPerPage]="10" [totalItems]="59" idPrefix="simple" [(currentPage)]="2">
</desy-pagination>

Implementación listado con select

<desy-pagination 
  [itemsPerPage]="10" [totalItems]="64" [hasSelect]="true" [hasNext]="true" [hasPrevious]="true" [idPrefix]="'selector'" previousText="Anterior" nextText="Siguiente" [(currentPage)]="3" >
</desy-pagination>

Área de empleados públicos e Integradores

desy-angular v11.1 - Manual de integración DesyPaginationModule

Analytics

Componentes relativos a paginación

Pagination

Implementación listado

Implementación listado con select

Implementación listado con select

Implementación listado con selector de elementos por página

Related content