Paginação em Vanilla JavaScript

Introdução

Ao criar um site ou aplicativo da Web, especialmente se eles apresentarem muitos modelado conteúdo (como uma grade ou lista de itens pertencentes a uma categoria) – geralmente é uma boa ideia divida em páginas para reduzir o número de itens que aparecem na tela de uma só vez.

Neste artigo, aprenderemos como implementar a paginação em nossos projetos da Web usando o Vanilla JavaScript desde o início.

Para o propósito deste artigo, vamos buscar o conteúdo de isto exemplo de resposta da API. Ele contém 100 pontos de dados, mas usaremos apenas 30 e exibiremos 6 postagens em nossa tela por vez.

Iniciando

Antes de buscar todas as postagens necessárias da API usando a API Fetch integrada do navegador, primeiro precisamos criar uma marcação HTML básica que será preenchida dinamicamente por meio de nosso script posteriormente:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Buscando postagens da API REST

Como mencionado anteriormente, a paginação consiste em dividir o conteúdo em partes menores. Requer que você busque os dados, decida quando e como dividir, calcule o número de páginas e, em seguida, mostre uma parte para o usuário. Felizmente – a funcionalidade de back-end geralmente cuida das primeiras tarefas e retorna a página relevante, o número total de páginas e o conteúdo por página.

Vamos começar buscando primeiro todas as nossas postagens e, posteriormente, alteraremos isso para consultar apenas alguns pontos de dados por página:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Vamos examinar rapidamente o código acima. Em primeiro lugar, começámos por obter o div elemento onde estaríamos exibindo todo o nosso conteúdo através do class nome que atribuímos ao div. Por fim, escrevemos uma função para lidar com a operação de busca.

No fetchPosts() função, usamos o fetch API para recuperar mensagens do API de postagens de espaço reservado JSON, em seguida, armazene os dados JSON referenciados pelo posts variável e usou o innerHTML para adicionar cada parte do conteúdo ao posts-section passando por eles.

Neste ponto, buscamos com sucesso todo o nosso conteúdo.

Vamos começar declarando três variáveis ​​críticas para implementar a paginação em nossa página da web. O primeiro é o número de postagens que queremos declarar por página, Em seguida, o número da página atual (1 por padrão) e o número total de páginas.

Para este guia, daremos a número total de páginas um número fixo de 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

Na seção anterior, exibimos todas as postagens em uma única página, mas queremos mostrar apenas seis por vez. Portanto, definimos o numberPerPage para 6 que usaremos agora para ajustar a operação de busca para que seja exibida apenas 6 mensagens.

Depende da implementação específica, mas é prática comum permitir que parâmetros de consulta sejam usados ​​ao buscar resultados de APIs, que permitem buscar um determinado página dos resultados. Por exemplo, a simulação da API REST que estamos usando permite o page e limit parâmetros que permitem carregar apenas os lotes que você mostrará em um determinado momento.

Desta forma, carregamos apenas os dados que queremos mostrar ao usuário! Podemos então pré-buscar a próxima página para um tempo de carregamento mais rápido ou aproveitar a aceleração computacional alcançada carregando apenas os dados a serem mostrados.

Faremos uso desses parâmetros alterando nossa solicitação de busca:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

No código acima, adicionamos os dois parâmetros ao endpoint da API, que são os pageNumber e os votos de número de postagens por página o que nos ajudaria a dividir nossas postagens em várias páginas e essas postagens agora podem ser exibidas com base no número da página.

Além disso, também passamos no pageNumber ao fetchPosts() função para que possamos chamar essa função sempre que a página mudar:

Vamos agora adicionar funcionalidade aos botões de navegação da página na parte inferior de nossa página e fazer com que eles exibam o conteúdo apropriado com base no número da página.

Notaremos que na marcação tínhamos uma seção que mostrava os botões de paginação:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Agora vamos adicionar click eventos a cada botão para que, ao serem clicados, apareça o conteúdo pretendido para aquela página.

Implementando o Anterior Botão

A lógica aqui é bem simples. Tudo o que temos a fazer é recuperar o elemento que representa o botão anterior, Adicione o click event listener para ele e mostre o conteúdo apropriado quando o botão for clicado:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

Depois de adicionar um click ouvinte de eventos, verificamos se o número da página atual é maior que 1 na função de retorno de chamada. Se o número for igual ou menor que 1, continuaremos mostrando o conteúdo atual. Mas se o número da página atual for maior que 1 podemos decrementar livremente seu valor e chamar o fetchPosts(pageNumber) função com o novo número de página passado nela como argumento, mostrando, portanto, o conteúdo da página anterior.

Implementando o Próximo Botão

A lógica aqui é completamente a mesma que para o anterior botão, com apenas algumas pequenas alterações. Claro, vamos recuperar o elemento da lista com a classe next em vez de prev. Além disso, verificaremos se o número da página atual é menor que o número de páginas que definimos para 30 manualmente antes. No final, vamos incrementar o número da página atual em vez de decrementá-lo:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Conclusão

Dividir o conteúdo em partes menores e mais gerenciáveis ​​que são exibidas individualmente é crucial sempre que você tenta exibir um banco de dados ou qualquer outra fonte de dados em seu aplicativo da web.

Neste artigo, vimos como implementar a paginação com JavaScript do zero, sem bibliotecas e ferramentas externas.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• Platoblockchain. Inteligência Metaverso Web3. Conhecimento Ampliado. Acesse aqui.
• Fonte: https://stackabuse.com/pagination-in-vanilla-javascript/