Lógica de paginação em nodeJS

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