Criando um sistema de paginação simples com JavaScript

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