BrazilJS

Share this post

Criando um sistema de paginação simples com JavaScript

www.braziljs.org

Criando um sistema de paginação simples com JavaScript

renanbastos93
Jul 25, 2017
Share this post

Criando um sistema de paginação simples com JavaScript

www.braziljs.org

Fala galera, tudo tranquilo com vocês? Bom, venho há tempos procurando e estudando algo simples de paginação. Já pesquisei na Internet diversos algoritmos mais complexos de um sistema de paginação usando o próprio JavaScript ou outras linguagens de programação. Atualmente, trabalho como Full-Stack JavaScript em uma Startup, em que desenvolvemos aplicativos híbridos e sites. Enfim, em diálogo com meu colega Yasser Veleda, chegamos em um algoritmo - bem simples ao nosso ver - para fazermos a paginação dos elementos que desejamos como, por exemplo, “Quero paginar meus items em JavaScript, como fazer?”

Primeiro Passo: Vamos iniciar uma função chamada “listItems” com os parâmetros (items, pageActual, limitItems), veja:

function listItems(items, pageActual, limitItems){         let result = [];         return result; }; 

Parâmetros: "Items" deverá receber um array, “pageActual” receberá o número da página que o usuário deseja acessar, e com o “limitItems”, você irá delimitar quantos items por página.

Segundo Passo: Agora iniciaremos, de fato, a nossa lógica, em que verificaremos, inicialmente, quantas páginas teremos utilizando a função “Math.Ceil” do JS.

let totalPage = Math.ceil( items.length / limitItems );

Como podemos verificar, declaramos uma variável usando o “Math.ceil”, em que a operação que ela vai retornar é o total de páginas disponível, ou seja, páginas que irão retornar os items.

Terceiro Passo: Teremos que criar nosso contador inicial, então criamos a variável “count”.

let count = ( pageActual * limitItems ) - limitItems;

Ela realiza um cálculo simples para verificar qual parte da lista ela deve iniciar para retornar ao usuário. Com essa variável, também criaremos o nosso delimitador no próximo passo.

Quarto Passo: Vamos criar nosso delimitador.

let delimiter = count + limitItems;

Com isso, já sabemos o delimitador que irá ser nosso limite do laço de repetição. Ou seja, ele vai induzir ao nosso laço de repetição para andar somente tantos items que serão retornados.

Quinto Passo: Vamos criar uma validação para apenas realizar a paginação de forma coerente.

if(pageActual <= totalPage){     //TODO: Create loop }

Como podemos ver na imagem acima, identificamos que ele somente irá realizar o laço de repetição se a página atual for menor ou igual ao total de páginas permitido na variável “totalPage”, conforme criamos no segundo passo.

Sexto Passo: Vamos, então, criar nosso laço de repetição.

for(let i=count; i<delimiter; i++){    if(items[i] != null){      //TODO: Push in Result    }    //TODO: increment count }

De acordo com a imagem, sabemos que já tem duas tarefas descritas no laço. Sendo assim, vamos ao passo final. Mas, antes de irmos a ele, temos que reparar na condições em que foi colocada a imagem, visto que ela está validando se o elemento existe para adicionar no resultado. Evitando, dessa forma, mandar dados nulos ou indefinidos para a paginação.

Sétimo Passo: Agora iremos concluir a lógica interna do laço de repetição

if(items[i] != null){       result.push(items[i]);    }    count++;

Sabemos que ficou faltando apenas dar um retorno à função “return result”. Enfim, antes de mostrar como ficou, precisamos prestar atenção em um detalhe para não dar problema.

 function listItems(items, pageActual, limitItems){     let result = [];     let totalPage = Math.ceil( items.length / limitItems );     let count = ( pageActual * limitItems ) - limitItems;     let delimiter = count + limitItems;          if(pageActual <= totalPage){         for(let i=count; i<delimiter; i++){             if(items[i] != null){                 result.push(items[i]);             }             count++;         }     } return result; };  Exemplos de uso:  var next = ['Next 1','Next 2','Next 3','Next 4','Next 5']; var resultNext = listItems(next, 1, 2); var resultNext2 = listItems(next, 2, 2); var resultNext3 = listItems(next, 3, 2);  Execução:  Obrigado a todos! Link para o Código
Share this post

Criando um sistema de paginação simples com JavaScript

www.braziljs.org
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 BrazilJS
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing