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

The Ignite UI for Blazor Pagination feature in Blazor Grid is used to split a large set of data into a sequence of pages that have similar content. React grid pagination improves user experience and data interaction. IgbGrid pagination is configurable via a separate component projected in the grid tree by defining a IgbPaginator tag, similar to adding of a column. As in any Blazor table, the pagination in the Blazor Grid supports template for custom pages.

Blazor Grid Pagination Example

The following example represents IgbGrid pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the IgbGrid pages via "Go to last page" and "Go to first page" buttons.

.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

The IgbPaginator component is used along with the IgbGrid component in the example below, but you can use it with any other component in case paging functionality is needed.

<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.