Skip to main content

📦 AlpuraPaginatorComponent – Guía de uso y API

Este documento describe el componente AlpuraPaginatorComponent, diseñado para manejar la paginación de datos de forma flexible en la aplicación Alpura.


🧩 Estructura HTML de ejemplo

<alpura-paginator
[totalRows]="totalItems"
(paginatorEvent)="onPaginatorEvent($event)"
></alpura-paginator>

🔍 Parámetros de entrada (@Input)

PropiedadTipoDescripción
totalRowsnumberNúmero total de registros a paginar.

📤 Eventos de salida (@Output)

EventoTipoDescripción
paginatorEventIAlpuraPaginatorEvento que se dispara cada vez que cambia la paginación.

Estructura del evento IAlpuraPaginator:

interface IAlpuraPaginator {
page: number; // Página actual seleccionada
size: number; // Número de ítems por página
}

🧩 Funcionalidades principales

  • Cambiar la cantidad de ítems por página mediante un select.
  • Navegar entre páginas (anterior/siguiente/selección directa).
  • Introducir el número de página para saltar a ella directamente.

📥 Ejemplo de manejo del evento paginatorEvent

onPaginatorEvent(event: IAlpuraPaginator): void {
console.log('Página actual:', event.page);
console.log('Ítems por página:', event.size);
// Aquí puedes realizar tu lógica de paginación (fetch de datos, etc.)
}

🚀 Resultado esperado

  • Un componente de paginación reutilizable que se integra fácilmente en cualquier lista o tabla de datos.
  • Navegación completa: botones para ir a la página siguiente, anterior, primera y última.
  • Un campo de entrada que permite al usuario saltar directamente a una página específica.
  • Un selector para que el usuario pueda cambiar la cantidad de elementos mostrados por página.
  • Cálculo automático del número total de páginas basado en la propiedad totalRows.
  • Emisión del evento paginatorEvent cada vez que el usuario cambia de página o de tamaño de página, facilitando la carga de datos en el componente padre.
  • Mejora la experiencia de usuario al manejar grandes conjuntos de datos de manera eficiente.

📬 Soporte

Para dudas o mantenimiento del componente AlpuraPaginatorComponent, contactar al equipo de arquitectura.