Criando um sistema de paginação simples com JavaScript

Em:

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: Execução do algorítimo de paginação.

Obrigado a todos! Link para o Código

  • Weekly #187 – Novidades BrazilJS, Next.js v2 e Pesquisa do StackOverflow

    A BrazilJS Weekly é a seleção semanal de novidades sobre o desenvolvimento Web no Brasil e no mundo. Ainda não é inscrito? Faça o seu cadastro e receba nossa Newsletter semanal 😎👊🙂👌👍 Sugira conteúdo para a Weekly usando o nosso canal de issues no Github. Um agradecimento especial aos 16 colaboradores da edição nº 187!

  • Novos palestrantes BrazilJS Conf 2017

    Desta vez estamos trazendo mais 7 novos palestrantes! E a lista não para por aí, até o início de Julho teremos a lista e a programação completa do evento.

  • Module folding: matando o código morto

    E aí galera! O tópico de hoje é module folding, também conhecido como tree-shaking. Estes termos são um tanto complicados de traduzir para o português, logo, utilizarei os nomes em inglês ao longo deste artigo. Module folding Module folding, ou tree-shaking, trata-se de uma técnica de eliminação de código morto (não utilizado), com o intuito […]

Patrocinadores BrazilJS

Gold

Silver

Bronze

Apoio

BrazilJS® é uma iniciativa NASC.     Hosted by Getup