Descripción general de la paginación de cuadrícula de Blazor

La función Ignite UI for Blazor Paginación en Blazor Grid se utiliza para dividir un gran conjunto de datos en una secuencia de páginas con contenido similar. React paginación en cuadrícula mejora la experiencia del usuario y la interacción con los datos.IgbGrid La paginación se puede configurar mediante un componente separado proyectado en el árbol de la cuadrícula definiendo unaIgbPaginator etiqueta, similar a la suma de una columna. Como en cualquier tabla Blazor, la paginación en la cuadrícula de Blazor soporta plantillas para páginas personalizadas.

Blazor Grid Pagination Example

El siguiente ejemplo representaIgbGrid la paginación y expone las opciones, el uso de elementos por página y cómo se puede habilitar el pagado. El usuario también puede navegar rápidamente por lasIgbGrid páginas mediante los botones "Ir a la última página" y "Ir a la primera página".

.gridSize {
    --ig-size: var(--ig-size-small);
}

<IgbGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
    <IgbPaginator PerPage="10"></IgbPaginator>
</IgbGrid>

Paging with Group By

Las filas de grupo participan en el proceso de paginación junto con las filas de datos. Cuentan para el tamaño de página de cada página. Las filas contraídas no se incluyen en el proceso de paginación.

La integración entre paginación y agrupar por se describe en el tema Agrupar por.

Usage

ElIgbPaginator componente se utiliza junto con elIgbGrid componente del ejemplo siguiente, pero puedes usarlo con cualquier otro componente en caso de que se necesite funcionalidad de paginación.

<IgbGrid @ref=grid Data=Data className="gridSize">
    <IgbPaginator Page="grid.Page" TotalRecords="grid.TotalRecords" PerPage="10">
    </IgbPaginator>
</IgbGrid>

Paginator Component Demo

API References

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.