Mudar a paginação | Front-end

Olá, estou tentando criar 8 tabelas com JS mas queria mudar o thead delas


const hype = {
    get(item){
        return document.querySelector(item)
    }
}
let quantidadePorPagina = 8;


const estado = {
    pagina: 1,
    quantidadePorPagina,
    totalPagina:quantidadeTabela.length / quantidadePorPagina,
};
const controles = {
    next(){
        estado.pagina++
        if(estado.pagina > estado.totalPagina){
            estado.pagina--
        }
    },
    prev(){
        estado.pagina--
        if(estado.pagina < 1){
            estado.pagina++
        }

    },
    createListeners(){
        hype.get('.prev').addEventListener('click', () => {
            controles.prev() ;
        });
        
        hype.get('.next').addEventListener('click', () => {
            controles.next();
        });
        
        
    }

}

console.log(controles.createListeners())

HTML

<main id="container">
        <h1>Lista de logs</h1>
         <div class="controls">
            <div class="prev">anterior </div>
            <span class="numbers">
                <span>1</span>
            </span>
            <div class="next">proximo</div>
        </div>
</main>

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.