Paginación de cuadrícula Angular

    Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Grid pagination is configurable via a separate component projected in the grid tree by defining a igx-paginator tag, similar to adding of a column. As in any Angular Table, the pagination in the Grid supports template for custom pages.

    Angular Pagination Example

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

    Adding a igx-paginator component will control whether the feature is present, you can enable/disable it by using a simple *ngIf with a toggle property. The perPage input controls the visible records per page. Let’s update our Grid to enable paging:

    <igx-grid #grid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-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>

    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

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

    <igx-grid #grid [data]="data">
    <igx-paginator #paginator [(page)]="grid.page" [totalRecords]="grid.totalRecords" [(perPage)]="10"
            [selectOptions]="selectOptions">
    </igx-paginator>
</igx-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 elGrid Remote Data Operations tema.

    Remote Paging with Custom Template

    In some cases you may want to define your own paging behavior and this is when we can take advantage of the igx-paginator-content and add our custom logic along with it. This section explains how we are going to extend the Remote Paging example in order to demonstrate this.

    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);
    }
  }
}

    Pagination Style Example

    API References

    Additional Resources

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