Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Angular - Datagrid - muitos registros - paginação

por Wesley Anderson Leite
| 80.6k xp | 4 posts
Desenvolvedor

Tenho uma aplicação angular, onde tenho uma grid com dtOptions, queria saber como que faz pra fazer a paginação com api? meu banco de dados tem mais de 1 milhão de registros, e não quero trazer todos de uma só vez pra tela, quero que traga conforme eu navegue pela grid.

Meu html:

Estou utilizando o datatable [dtOptions]=" dtOptions" na minha table.

Estou importando no arquivo typescript:

import { DataTableDirective } from 'angular-datatables';

Declarando da seguinte forma:

dtOptions: DataTables.Settings = {};

this.dtOptions = { pagingType: 'full_numbers', pageLength: 10, processing: true, language: { emptyTable: "Nenhum registro encontrado", info: "Mostrando de START até END de TOTAL registros", infoEmpty: "Mostrando 0 até 0 de 0 registros", infoFiltered: "(Filtrados de MAX registros)", infoPostFix: "", lengthMenu: "MENU resultados por página", loadingRecords: "Carregando...", processing: "Processando...", zeroRecords: "Nenhum registro encontrado", search: "Pesquisar", paginate: { next: "Próximo", previous: "Anterior", first: "Primeiro", last: "Último" }, aria: { sortAscending: ": Ordenar colunas de forma ascendente", sortDescending: ": Ordenar colunas de forma descendente" } } };

3 respostas
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Wesley, tudo bem? Isso pode ser feito de N manerias, vai depender muito da tecnologia da API e do banco de dados, mas, de forma geral seria:

  1. Quando realizar a busca no banco de dados utilizar as propriedade limit e offset nas queries.
  2. Criado o parâmetro da pagina atual no back e calcular qual seria o limit e offset, e.g: Se você está na página 1 e quer mostrar 20 itens por página, o limit seria 20 e offset 0, se for para a página 2, o limit ainda seria 20, mas, o offset seria 20 (pula os 20 primeiros).
  3. Enviar do front para o back qual é a pagina atual no parâmetro recém criado.

Espero ter ajudado.

por Wesley Anderson Leite
| 80.6k xp | 4 posts
Desenvolvedor

Beleza, então, no back-end é tranquilo, a grande dúvida era captar os valores da biblioteca que mencionei, mas enfim, a solução foi eu limitar a quantidade de registros aqui no back-end, e no front eu deixei uma mensagem informativa para o usuário. Na documentação de CloudTables eles não enfatizam o Angular para essas manipulações (https://datatables.net/extensions/index), mas enfim, achei esse contorno como solução, de limitar os registros rs

por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Boa Wesley, fico feliz que tenha dado certo.

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.