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

  • BRJS2017: Confira como foram as palestras da manhã do segundo dia

    O segundo e último dia da BrazilJS 2017 em Porto Alegre começou com Jem Young (@JemYoung), da Netflix, alertando que “colocamos nossos sonhos e esperanças no computador, mas não somos um”. Com isso, ele chamou a atenção para o fato de passarmos a maior parte do tempo lendo e compreendendo códigos, e escrevendo outro tanto, […]

  • Call for papers: Seja um palestrante da BrazilJS 2017

    Todos os presentes na BrazilJS Conf tem uma grande parcela de importância. Mas você pode deixar sua marca na história da maior conferência JavaScript do mundo sendo um dos palestrantes!

  • As IDs dos vídeos do YouTube podem acabar?

    Tecnicamente, sim. Na prática, não. É o que prova Tom Scott, no vídeo onde aborta o assunto do nosso título. É de fato intrigante. Ao olhar para a URL de um vídeo do YouTube, você programador, nunca pensou a respeito? O identificador único do vídeo possui apenas 11 caracteres. Com a quantidade absurda de vídeos […]

Patrocinadores BrazilJS

Bronze

BrazilJS® é uma iniciativa NASC.     Hosted by Getup