Descripción general del componente del paginador Angular

    La paginación en Angular es una técnica de optimización cuando se trabaja con grandes conjuntos de datos. El propósito de Angular Paginator es proporcionar una interfaz de usuario y una API para dividir y distribuir grandes volúmenes de datos en páginas del mismo tamaño, por las que el usuario final pueda navegar.

    El componente Angular Paginator muestra al usuario final la página que está viendo, el tamaño de la página, el número total de páginas y los elementos de la interfaz de usuario para una navegación rápida entre páginas.

    Ignite UI for Angular Paginator le permite dividir un conjunto de datos en varias páginas similares. Este método de paginación es particularmente adecuado para grandes conjuntos de datos que son difíciles de mostrar y ver todos a la vez, es por eso que el paginador generalmente se usa junto con una lista de elementos o una tabla de datos. El Paginador en Angular permite al usuario seleccionar una página específica de un rango de páginas y determinar cuántos registros deben ver en cada página.

    Angular Paginator Example

    El siguiente ejemplo de paginación Angular muestra una plantilla de paginador que muestra cómo los usuarios pueden navegar a través de 4 páginas con diferentes elementos y seleccionar la cantidad de elementos que se mostrarán en un menú desplegable.

    Getting Started with Ignite UI for Angular Paginator

    Para comenzar con el componente Ignite UI for Angular Paginator, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

    ng add igniteui-angular

    Para obtener una introducción completa a la Ignite UI for Angular, lea el tema de introducción.

    El siguiente paso es importar IgxPaginatorModule en el archivo app.module.ts.

    // app.module.ts

import { IgxPaginatorModule } from 'igniteui-angular';
// import { IgxPaginatorModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxPaginatorModule],
    ...
})
export class AppModule {}

    Alternativamente, a partir de 16.0.0, puede importar IgxPaginatorComponent como una dependencia independiente o usar el token IGX_PAGINATOR_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

    // home.component.ts

import { NgFor } from '@angular/common';
import { HammerModule } from '@angular/platform-browser';
import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from 'igniteui-angular';
// import { IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-list>
        <igx-list-item *ngFor="let item of pagedData">{{item.text}}</igx-list-item>
    </igx-list>
    <igx-paginator [totalRecords]="products.length" [perPage]="perPage"></igx-paginator>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_PAGINATOR_DIRECTIVES, IGX_LIST_DIRECTIVES, HammerModule, NgFor]
    /* or imports: [IgxPaginatorComponent, IgxListComponent, IgxListItemComponent, HammerModule, NgFor] */
})
export class HomeComponent {
    public products: Product [];
    public perPage = 10;
    public pagedData: Product [];
}

    Ahora que ha importado la Ignite UI for Angular Paginator, puede comenzar a usar el componente igx-paginator.

    Using the Angular Paginator

    Cada instancia de paginador requiere:

    • El número de elementos por página (establecido de forma predeterminada en 15)
    • El número total de elementos que se están paginando.

    Además, de forma predeterminada, la página actual se establece en 0 cuando se inicializa el componente del paginador Angular, pero esto se puede cambiar a través de la propiedad de la página.

    <igx-paginator #paginator [totalRecords]="120" [perPage]="25">
</igx-paginator>

    Angular Pagination Template

    La plantilla de paginación predeterminada consta de dos partes principales. El primero es un menú desplegable que le permite definir la cantidad de elementos que se muestran en cada página y el segundo son los botones de navegación que le permiten navegar fácilmente por las páginas.

    Además, el área de paginación admite la adición de plantillas personalizadas por parte del usuario, si se define una referencia igx-paginator-content dentro de igx-paginator:

    <igx-paginator #paginator>
    <igx-paginator-content>
        ...
    </igx-paginator-content>
</igx-paginator>

    Además, se introdujeron IgxPageSizeSelectorComponent e IgxPageNavigationComponent y ahora los componentes del paginador permiten definir un contenido personalizado, como se muestra en el siguiente ejemplo. El primero agregará el elemento desplegable y la etiqueta correspondiente al tamaño de la página y el segundo manejará la navegación de la página con todos los botones de acción.

    <igx-paginator #paginator>
	<igx-paginator-content>
		<igx-page-size></igx-page-size>
		<igx-page-nav></igx-page-nav>
	</igx-paginator-content>
</igx-paginator>

    La paginación también se puede realizar mediante programación a través de la API de paginación /que se describe con más detalles en la sección siguiente/ utilizando los métodos paginate, previousPage, nextPage y las entradas page, perPage y totalRecords. Donde página le permite configurar la página actual, por página: la cantidad de elementos que se muestran en una página y totalRecords: la cantidad de registros que están en la cuadrícula. La propiedad TotalRecords es útil cuando tiene paginación con datos remotos y desea modificar el recuento de páginas en función del total de registros remotos. Tenga en cuenta que si está utilizando paginación y todos los datos se pasan a la cuadrícula, el valor de la propiedad totalRecords se establecerá de forma predeterminada en la longitud de la fuente de datos proporcionada. Si se establece totalRecords, tendrá prioridad sobre la longitud predeterminada según la fuente de datos.

    Paging API

    Aporte Descripción
    página Obtiene/establece la página actual.
    por página Obtiene/establece el número de elementos visibles por página.
    Seleccione opciones Obtiene/establece opciones personalizadas en el elemento Seleccionar del paginador. Valores de selección predeterminados [5, 10, 15, 25, 50, 100, 500]
    registros totales Obtiene/establece el recuento total de registros.
    paginas totales Obtiene/establece el recuento total de páginas.
    cadenas de recursos Obtiene/establece las cadenas de recursos. De forma predeterminada, utiliza cadenas de recursos EN.
    superposiciónConfiguración Obtiene/establece una configuración de superposición personalizada.
    Producción Descripción
    por cambio de página Emitido cuandoperPage Se cambia el valor de propiedad del paginador.
    páginaCambiar Emitido después de cambiar la página actual.
    paginación Emitido antes de realizar la paginación. Cancelable.
    paginaciónHecho Emitido después de realizar la paginación.

    Angular Paginator Localization

    Con solo unas pocas líneas de código, puede localizar fácilmente todas las cadenas que forman parte del componente Paging. Para localizar una instancia de paginación determinada, utilice la propiedad de entrada ResourceStrings. Puedes usar esto

    Paso 1: Importe la interfaz IPaginatorResourceStrings y la función changei18n:

    import { IPaginatorResourceStrings, changei18n } from "igniteui-angular";

    Paso 2: definir las cadenas de recursos de paginación:

    private paginatorResourceStrings: IPaginatorResourceStrings = {
    igx_paginator_label: 'Records per page:',
    igx_paginator_first_page_button_text: 'Custom first page text',
    igx_paginator_last_page_button_text: 'Custom last page text',
    igx_paginator_next_page_button_text: 'Custom next page text',
    igx_paginator_previous_page_button_text: 'Custom previous page text',
    igx_paginator_pager_text: 'out of'
};

    Paso 3: pase el objeto a la función changei18n como parámetro para cambiar el i18n global para el componente en el nivel app.module. Esto cambiará la cadena de recursos de todos los componentes de paginación que forman parte de su aplicación:

    public ngOnInit(): void {
    changei18n(this.paginatorResourceStrings as any);
}

    Para cambiar la cadena de recursos a un componente de paginación específico, puede usar @ViewChild y configurar las cadenas de recursos deseadas dentro de un método requestAnimationFrame con una devolución de llamada, que se invocará antes de volver a pintar la página. Establecer un objeto recién creado en la propiedad ResourceStrings localizará solo la instancia de ese componente determinado.

    @ViewChild('paginator', { read: IgxPaginatorComponent, static: false }) public paginator: IgxPaginatorComponent;
...

public ngOnInit(): void {
    requestAnimationFrame(() => {
        this.paginator.resourceStrings = this.paginatorResourceStrings;
    });
}

    API References

    Additional Resources

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