Descripción general de la paginación de cuadrícula de Web Components

The Ignite UI for Web Components Pagination feature in Web Components 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. IgcGridComponent pagination is configurable via a separate component projected in the grid tree by defining a IgcPaginatorComponent tag, similar to adding of a column. As in any Web Components table, the pagination in the Web Components Grid supports template for custom pages.

Web Components Grid Pagination Example

El siguiente ejemplo representaIgcGridComponent 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 lasIgcGridComponent 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);
}

<igc-grid id="grid" class="gridSize" height="500px" width="100%" >
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-grid>

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

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

<igc-grid id="grid" className="gridSize">
    <igc-paginator id="paginator" per-page="10">
    </igc-paginator>
</igc-grid>

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
    const selectOptions = [5, 15, 20, 50];
    grid.data = this.data;
    paginator.page = grid.page;
    paginator.totalRecords = grid.totalRecords;
    paginator.selectOptions = selectOptions;
}

Paginator Component Demo

API References

Additional Resources

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