[Anderson Paraibano]

A paginação é uma funcionalidade essencial para a exibição de grandes volumes de dados de forma organizada e fácil de navegar. No desenvolvimento web, o JavaScript é uma das principais ferramentas utilizadas para implementar a paginação em uma página da web. Neste artigo, vamos explorar como criar uma paginação simples usando JavaScript.

A primeira etapa para implementar a paginação é estruturar os dados que serão exibidos. Para este exemplo, vamos considerar que temos uma matriz de objetos JavaScript, cada objeto representando um item a ser exibido na página. Cada item possui um ID, um título e uma descrição. Vamos supor que temos um total de 100 itens para exibir.

javascript
Copy code
const items = [
{ id: 1, title: “Item 1”, description: “Descrição do item 1” },
{ id: 2, title: “Item 2”, description: “Descrição do item 2” },
// …
{ id: 100, title: “Item 100”, description: “Descrição do item 100” }
];
Em seguida, precisamos definir quantos itens queremos exibir por página. Vamos assumir que queremos exibir 10 itens por página. Precisaremos calcular o número total de páginas com base no número total de itens e na quantidade de itens por página.

javascript
Copy code
const itemsPerPage = 10;
const totalPages = Math.ceil(items.length / itemsPerPage);
Agora que temos o número total de páginas, podemos criar uma função para exibir os itens de cada página. Vamos chamar essa função de displayItems.

javascript
Copy code
function displayItems(page) {
// Calcula o índice inicial e final dos itens para exibir na página atual
const startIndex = (page – 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;

// Obtém os itens da página atual
const pageItems = items.slice(startIndex, endIndex);

// Exibe os itens na página
pageItems.forEach(item => {
console.log(item.title);
console.log(item.description);
console.log(‘—‘);
});
}
A função displayItems recebe o número da página como parâmetro e calcula os índices inicial e final dos itens a serem exibidos. Em seguida, ela utiliza o método slice para obter os itens da página atual. Finalmente, a função percorre os itens e os exibe no console. Observe que, neste exemplo, estamos apenas imprimindo os itens no console, mas você pode adaptar essa função para exibi-los em sua página HTML.

Agora podemos chamar a função displayItems para exibir os itens da primeira página.

javascript
Copy code
displayItems(1);
Isso exibirá os primeiros 10 itens, como definido na variável itemsPerPage.

A próxima etapa é criar controles de página para permitir que o usuário navegue entre as diferentes páginas. Podemos criar dois botões: um para ir para a página anterior e outro para ir para a próxima página.

javascript
Copy code
const prevButton = document.getElementById(‘prev-button’);
const nextButton = document.getElementById(‘next-button’);

let currentPage = 1;

prevButton.addEventListener(‘click’, () => {
if (currentPage > 1) {
currentPage–;
displayItems(currentPage);
}
});

nextButton.addEventListener(‘click’, () => {
if (currentPage < totalPages) {
currentPage++;
displayItems(currentPage);
}
});
Nesse exemplo, supomos que existem elementos HTML com os IDs “prev-button” e “next-button” para os botões de página anterior e próxima, respectivamente. O código adiciona ouvintes de evento aos botões para que, quando clicados, a página atual seja atualizada e os itens sejam exibidos usando a função displayItems.

Com isso, implementamos uma paginação simples usando JavaScript. A estrutura básica envolve definir os dados a serem exibidos, calcular o número total de páginas, criar uma função para exibir os itens de cada página e adicionar controles de página para permitir a navegação entre elas. Você pode personalizar e estilizar a paginação de acordo com as necessidades do seu projeto, adicionando mais recursos, como exibição de números de página ou indicadores visuais de página atual.

A paginação é uma ótima maneira de melhorar a experiência do usuário ao lidar com grandes conjuntos de dados, fornecendo uma forma mais organizada e fácil de navegar pelos conteúdos. O JavaScript é uma poderosa linguagem de programação que permite criar soluções interativas e dinâmicas, como a paginação, adicionando mais valor aos seus projetos web.

[Autor]

Posts