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

    La función de paginación Ignite UI for Blazor de Blazor cuadrícula se utiliza para dividir un gran conjunto de datos en una secuencia de páginas que tienen contenido similar. React paginación de cuadrícula mejora la experiencia del usuario y la interacción con los datos. IgbGrid La paginación se puede configurar a través de un componente separado proyectado en el árbol de cuadrícula mediante la definición de una IgbPaginator etiqueta, similar a la adición de una columna. Al igual que en cualquier tabla Blazor, la paginación de la cuadrícula Blazor admite plantillas para páginas personalizadas.

    Blazor Grid Pagination Example

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

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

    .gridSize {
        --ig-size: var(--ig-size-small);
    }
    css
    <IgbGrid @ref=grid Class="gridSize" Width="100%" Height="500px" Data=Data>
        <IgbPaginator PerPage="10"></IgbPaginator>
    </IgbGrid>
    razor

    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

    El componente IgbPaginator se usa junto con el componente IgbGrid en el siguiente ejemplo, pero puede usarlo con cualquier otro componente en caso de que se necesite la funcionalidad de paginación.

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

    Paginator Component Demo

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    API References

    Additional Resources

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