Paginação de grade 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>

    Exemplo:

    <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

    As linhas de grupo participam do processo de paginação junto com as linhas de dados. Eles contam para o tamanho da página de cada página. As linhas recolhidas não são incluídas no processo de paginação. A integração entre Paginação e Agrupar por é descrita no tópico Agrupar por.

    Usage

    Oigx-paginator componente é usado junto com oigx-grid componente do exemplo abaixo, mas você pode usá-lo com qualquer outro componente caso seja necessária funcionalidade de paginação.

    <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

    A paginação remota pode ser realizada declarando um serviço, responsável pela busca de dados e um componente, que será responsável pela construção da Grade e assinatura de dados. Para informações mais detalhadas, confira oGrid 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.

    Estilização

    Para começar a estilizar o paginador, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende epaginator-theme aceita os$text-color​$background-color​$border-color parâmetros.

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

    Como visto, opaginator-theme controle apenas as cores do contêiner de paginação, mas não afeta os botões na interface do pager. Para estilizar esses botões, vamos criar um novo tema de botão com ícones:

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

    Em vez de codificar os valores de cor como acabamos de fazer, podemos alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para orientações detalhadas sobre como usá-los.

    O último passo é incluir os mixins de componentes, cada um com seu respectivo tema:

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

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

    Incluímos o tema de ícone-botão criado dentro.igx-paginator__pager, para que apenas os botões do paginador sejam estilizados. Caso contrário, outros botões de ícones na grade também seriam afetados.

    Note

    Se o componente estiver usando umEmulated ViewEncapsulation, é necessário quepenetrate esse encapsulamento use::ng-deep para estilizar os componentes que estão dentro do contêiner de paginação, como o botão:

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

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

    Pagination Style Example

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.