Lógica de paginação em nodeJS
Olá pessoal, tudo bem com vocês ? Neste pequeno artigo rápido e direto, será dado como exemplo o passo a passo de um sistema de paginação feito em nodeJS.
Requisitos para um melhor entendimento:
Lógica de Programação
Noções de nodeJS
O que é lógica de paginação ?
De um modo simples, uma técnica de exibição de elementos dentro de um limite, ou seja, o usuário terá a experiência de visualizar elementos no browser de uma forma dividida e com fluidez, Vejamos um exemplo neste tópico da Dio, logo abaixo, você verá tanto a opção de “anterior”
como também de “próximo”.
Passo 1:
Primeraimente, vamos criar uma rota que vai ficar responsável por receber um número como parâmetro, e logo em seguida, duas váriaveis. Então, a primeira váriavel “paginas” irá receber o número passado como parâmetro, este número será o nosso “deslocamento”.
router.get (“elementos/paginas/:numero”, (req , res) => { var paginas = req.params.numero; })
Observação: Por questões didáticas iremos escrever o código em português.
Passo 2:
Já a segunda váriavel, chamada de “deslocamento” , inicialmente terá um valor de 0, e funcionará como um valor dinâmico que vai ser melhor explicado nos passos seguintes.
router.get (“elementos/paginas/:numero”, (req , res) => { var paginas = req.params.numero; var deslocamento = 0; });
Passo 3:
Logo após, a váriavel “deslocamento”, teremos uma pequena condicional, basicamente, vamos verificar se o numero passado como parâmetro não é um número ou caso seja igual a 1, caindo nesta condicional, o nosso “deslocamento” é 0, será mostrado então, a partir do primeiro elemento. Caso contrário, O deslocamento será o valor da página passado anteriormente como parâmetro multiplicado pela quantidade de elementos a ser exibidos no browser.
if (isNaN(paginas) || paginas == 1){ deslocamento = 0; } else { deslocamento = parseInt(paginas) * 4 }
Ainda com dúvidas ?
Quando digitado o número 1, o deslocamento será 0 porque queremos mostrar a partir do primeiro elemento, e depois será exibido o elemento 0 até o 3.
Quando digitado o número 2, o deslocamento será 4 porque queremos exibir a partir do quarto elemento, e depois será mostrado o elemento 4 ao 7, e assim sucessivamente.
1 = 0 = 3 2 = 4 = 7 3 = 8 = 11 4 = 12 = 15 5 = 16 = 19
Passo 4:
Iremos agora fazer uma pesquisa no banco de dados por todos os elementos que queremos exibir no browser, e além disso, pegaremos também a quantidade desses elementos através do método "findAndCountAll" que irá trazer uma pesquisa com um limite de elementos para ser exibidos no browser, no caso, o limite é 4. Além disso, irá retornar os nossos dados a partir de um deslocamento de valor da página.
Elementos.findAndCountAll({ limite: 4, deslocamento: deslocamento });
Passo 5:
Chegando ao último “deslocamento” no browser, precisamos verificar se há uma próxima página ou não, isto é, se a soma da quantidade de elementos for maior que a contagem total dos elementos, então, não existe outra página para ser exibida. Criaremos uma variavel para o resultado final da paginação, e mostraremos visualmente no formato json.
.then (elementos) => { var proxima; if (deslocamento + 4 >= elementos.count){ proxima = false; } else { proxima = true; } var resultado = { proxima : próxima, elementos: elementos } res.json(resultado); }
A lógica de paginação é basicamente a mesma independente da linguagem, procure por mais informações em outras fontes, é um conceito fundamental para que o usuário tenha uma ótima experiência ao navegar em uma aplicação.
Linkedin - https://www.linkedin.com/in/senapf/
Instagram - https://www.instagram.com/0hert_z/?hl=pt-br
GitHub - https://github.com/fernanndosenna
Portfólio - https://antoniofernando.epizy.com/
-Antônio Fernando
Comentários (0)