Oi Geovana, tudo bem?
Você já tem um esboço inicial, mas há algumas partes faltando, como a criação das tabelas e a lógica para exibir as tabelas com base na página atual.
Vou tentar te ajudar pelo o que entendi que você deseja.
Vamos começar adicionando a criação das tabelas no HTML e também modificando seu JavaScript para criar 8 tabelas. Em seguida, você pode adicionar a lógica de paginação.
Vou adicionar um div
para cada tabela no HTML.
<main id="container">
<h1>Lista de logs</h1>
<div class="controls">
<div class="prev">anterior</div>
<span class="numbers">
<!-- Os números da página serão adicionados aqui dinamicamente -->
</span>
<div class="next">próximo</div>
</div>
<!-- Divs para as tabelas -->
<div class="table-container"></div>
<div class="table-container"></div>
<div class="table-container"></div>
<div class="table-container"></div>
<div class="table-container"></div>
<div class="table-container"></div>
<div class="table-container"></div>
<div class="table-container"></div>
</main>
JavaScript
Vamos criar 8 tabelas e adicionar ao container.
const hype = {
get(item) {
return document.querySelector(item);
},
};
let quantidadePorPagina = 8;
const quantidadeTabela = Array.from({ length: 64 }, (_, i) => i + 1); // Exemplo de 64 itens
const estado = {
pagina: 1,
quantidadePorPagina,
totalPagina: Math.ceil(quantidadeTabela.length / quantidadePorPagina),
};
const controles = {
next() {
estado.pagina++;
if (estado.pagina > estado.totalPagina) {
estado.pagina--;
}
updateTables();
},
prev() {
estado.pagina--;
if (estado.pagina < 1) {
estado.pagina++;
}
updateTables();
},
createListeners() {
hype.get('.prev').addEventListener('click', () => {
controles.prev();
});
hype.get('.next').addEventListener('click', () => {
controles.next();
});
},
};
function updateTables() {
const tables = document.querySelectorAll('.table-container');
tables.forEach((table, index) => {
const start = estado.pagina * quantidadePorPagina - quantidadePorPagina;
const end = estado.pagina * quantidadePorPagina;
const itemsToShow = quantidadeTabela.slice(start, end);
// Aqui você pode criar suas tabelas com os itemsToShow
table.innerHTML = `
<table>
<thead>
<tr>
<th>Cabeçalho ${index + 1}</th>
</tr>
</thead>
<tbody>
${itemsToShow.map(item => `<tr><td>${item}</td></tr>`).join('')}
</tbody>
</table>
`;
});
}
// Inicializar o sistema de paginação
controles.createListeners();
updateTables();
Agora você deve ter 8 tabelas no seu container e um sistema de paginação básico. Você pode personalizar ainda mais esse código para atender às suas necessidades específicas.
Um abraço e bons estudos.