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 tabela melhora a experiência do usuário e a interação de dados. A paginação da grade é configurável por meio de um componente separado projetado na árvore da grade, definindo uma igx-paginator tag, semelhante à adição de uma coluna. Como em qualquer tabela Angular, a paginação na Grid dá suporte ao modelo para páginas personalizadas.

    Angular Pagination Example

    O exemplo a seguir representa a paginação de grade e expõe o uso de items per page opções e como a paginação pode ser habilitada. O usuário também pode navegar rapidamente pelas páginas da grade por meio dos botões "Ir para a última página" e "Ir para a primeira página".

    Adicionar um igx-paginator componente controlará se o recurso está presente, você pode habilitá-lo/desabilitá-lo usando uma propriedade simples *ngIf com uma alternância. A perPage entrada controla os registros visíveis por página. Vamos atualizar nossa Grid 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

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

    <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 obtida declarando um serviço, responsável pela busca de dados e um componente, que será responsável pela construção do Grid e pela assinatura de dados. Para informações mais detalhadas, consulte o Grid Remote Data Operations tópico.

    Remote Paging with Custom Template

    Em alguns casos, você pode querer definir seu próprio comportamento de paginação e é quando podemos aproveitar e igx-paginator-content adicionar nossa lógica personalizada junto com ele. 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 o index arquivo, onde todas as funções do tema e mixins de componentes residem:

    @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 os paginator-theme parâmetros e aceita os $text-color​ ​$background-color parâmetros e . $border-color​

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

    Como visto, o paginator-theme apenas controla as cores do contêiner de paginação, mas não afeta os botões na interface do usuário do pager. Para estilizar esses botões, vamos criar um novo tema de botão de ícone:

    $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 obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter 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 ícone-botão-tema​.igx-paginator__pager criado, para que apenas os botões do paginador sejam estilizados. Caso contrário, outros botões de ícone na grade também seriam afetados.

    Note

    Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate usar esse encapsulamento::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.