0

Lógica de paginação em nodeJS

#Node.js
Antônio Sena
Antônio Sena

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



0
30

Comentários (0)

Estudante de nodeJS - React JS - JavaScript-Inglês

Brasil