Paginación de cuadrícula jerárquica Angular

    La paginación se utiliza para dividir un gran conjunto de datos en una secuencia de páginas con contenido similar. Angular paginación de tablas mejora la experiencia del usuario y la interacción con los datos. La paginación con cuadrícula jerárquica se puede configurar mediante un componente separado proyectado en el árbol de cuadrícula definiendo unaigx-paginator etiqueta, similar a la suma de una columna. Como en cualquier tabla Angular, la paginación en la Cuadrícula Jerárquica soporta plantillas para páginas personalizadas.

    Angular Pagination Example

    El siguiente ejemplo representa la paginación en cuadrícula jerárquica y expone las opciones, el uso yitems per page cómo se puede habilitar la paginación. El usuario también puede navegar rápidamente por las páginas de la Cuadrícula Jerárquica mediante los botones "Ir a la última página" y "Ir a la primera página".

    Añadir unigx-paginator componente controlará si la función está presente, puedes activarla o desactivarla usando una*ngIf simple con una propiedad de alternar. LaperPage entrada controla los registros visibles por página. Actualicemos nuestra Cuadrícula Jerárquica para habilitar el paginado:

    <igx-hierarchical-grid #hierarchicalGrid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-hierarchical-grid>

    Ejemplo:

    <igx-paginator #paginator [totalRecords]="20">
    <igx-paginator-content>
        <div id="numberPager" style="justify-content: center;">
            <button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
                PREV
            </button>
            <span>
               Page {{paginator.page}} of {{paginator.totalPages}}
            </span>
            <button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
                NEXT
            </button>
        </div>
    </igx-paginator-content>
</igx-paginator>

    Usage

    Eligx-paginator componente se utiliza junto con eligx-hierarchical-grid componente del ejemplo siguiente, pero puedes usarlo con cualquier otro componente en caso de que se necesite funcionalidad de paginación.

    <igx-hierarchical-grid>
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

    <igx-paginator></igx-paginator>
</igx-hierarchical-grid>

    Paginator Configuration within child grids

    Debido a ciertas limitaciones en cómo se implementan las cuadrículas secundarias de IgxHierarchicalGrid y cómo funciona el alcance DI, al definir un componente de paginador dentro de las etiquetas igx-row-island, siempre asegúrese de usar la directiva IgxPaginator en el paginador mismo. Esto asegurará que la cuadrícula secundaria tenga la instancia del paginador correcta como referencia:

    <igx-hierarchical-grid>
    ...
    <igx-row-island>
        ...
        <igx-grid-toolbar *igxPaginator>
           ...
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-grid>

    Paginator Component Demo

    Remote Paging

    La paginación remota puede lograrse declarando un servicio, responsable de la obtención de datos, y un componente que será responsable de la construcción de la Grid y la suscripción de datos. Para información más detallada, consulta elHierarchical Grid Remote Data Operations tema.

    Estilismo

    Para empezar a estilizar el paginador, necesitamos importar elindex archivo, donde están todas las funciones de tema y las mezclas de componentes:

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Siguiendo el enfoque más sencillo, creamos un nuevo tema que extiende lospaginator-theme y acepta los$text-color​$background-color​$border-color parámetros.

    $dark-paginator: paginator-theme(
  $text-color: #d0ab23;,
  $background-color: #231c2c,
  $border-color: #d0ab23;
);

    Como se ve, solopaginator-theme controla los colores del contenedor de paginación, pero no afecta a los botones de la interfaz del buscapersonas. Para darle estilo a esos botones, creemos un nuevo tema de icono para botones:

    $dark-button: icon-button-theme(
  $foreground: #d0ab23,
  $hover-foreground: #231c2c,
  $hover-background: #d0ab23,
  $focus-foreground: #231c2c,
  $focus-background: #d0ab23,
  $disabled-foreground: #9b7829
);
    Note

    En lugar de codificar los valores de color como acabamos de hacer, podemos lograr mayor flexibilidad en cuanto a colores usando laspalette funciones ycolor. Por favor, consulta elPalettes tema para obtener una guía detallada sobre cómo utilizarlos.

    El último paso es incluir los mixins de componentes, cada uno con su respectiva temática:

    @include css-vars($dark-paginator);

.igx-grid-paginator__pager {
  @include css-vars($dark-button);
}
    Note

    Incluimos el icono-botón-tema creado en su.igx-paginator__pager interior, de modo que solo los botones del paginador estilizarán. De lo contrario, otros botones de iconos en la cuadrícula también se verían afectados.

    Note

    Si el componente utiliza unaEmulated ViewEncapsulation, es necesario quepenetrate esta encapsulación use::ng-deep para estilizar los componentes que están dentro del contenedor de paginación, como el botón:

    @include css-vars($dark-paginator);

:host {
  igx-paginator {
    ::ng-deep {
      @include css-vars($dark-button);
    }
  }
}

    Demo

    API References

    Additional Resources

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