Paginação de grade Angular

    A paginação é usada para dividir um grande conjunto de dados em uma sequência de páginas com conteúdo semelhante. Angular paginação de tabelas melhora a experiência do usuário e a interação com dados. A paginação em grade é configurável por meio de um componente separado projetado na árvore da grade, definindo umaigx-paginator tag, semelhante à adição de uma coluna. Como em qualquer Angular Tabela, a paginação na Grade suporta templates para páginas personalizadas.

    Angular Pagination Example

    O exemplo a seguir representa a paginação em grade e expõe as opções, uso eitems per page como a paginação pode ser ativada. O usuário também pode navegar rapidamente pelas páginas da grade usando os botões "Ir para a última página" e "Ir para a primeira página".

    Adicionar umigx-paginator componente vai controlar se o recurso está presente, você pode habilitá-lo/desativá-lo usando uma propriedade simples*ngIf com alternância. AperPage entrada controla os registros visíveis por página. Vamos atualizar nossa Grade para habilitar a paginação:

    <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

    Em alguns casos, você pode querer definir seu próprio comportamento de paginação e é nesse momento que podemos aproveitar eigx-paginator-content adicionar nossa lógica personalizada junto com ela. Esta seção explica como vamos estender o exemplo de Paginação Remota para demonstrar isso.

    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.