Descripción general de la paginación en cuadrícula de árbol Blazor

    La función de paginación Ignite UI for Blazor de Blazor cuadrícula de árbol 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. IgbTreeGrid 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 de árbol de Blazor admite plantillas para páginas personalizadas.

    Ejemplo de paginación en cuadrícula de árbol Blazor

    En el ejemplo siguiente se representa IgbTreeGrid la paginación y se exponen 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 a través de los botones "Ir a la IgbTreeGrid última página" e "Ir a la primera página".

    EXAMPLE
    DATA
    MODULES
    RAZOR
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

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

    Uso

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

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

    Demostración del componente paginador

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Referencias de API

    Recursos adicionales

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