Dolgozók

[[oktatas:web:javascript|< JavaScript]] ====== Táblázat lapozása ====== * **Szerző:** Sallai András * Copyright (c) 2024, Sallai András * Szerkesztve: 2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== HTML =====

===== JavaScript =====


const tableBody = document.getElementById('table-body');
const prevPageButton = document.getElementById('prev-page');
const nextPageButton = document.getElementById('next-page');
let currentPage = 1;
const itemsPerPage = 5;

async function fetchEmployees() {
    const response = await fetch('employees.json');
    const data = await response.json();
    return data.employees;
}

function displayEmployees(employees, page) {
    const start = (page - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    const paginatedEmployees = employees.slice(start, end);

    tableBody.innerHTML = '';
    paginatedEmployees.forEach(employee => {
        const row = document.createElement('tr');
        row.innerHTML = `
            ${employee.id}
            ${employee.name}
            ${employee.age}
            ${employee.position}
        `;
        tableBody.appendChild(row);
    });
}

function handlePagination(employees) {
    const totalPages = Math.ceil(employees.length / itemsPerPage);

    displayEmployees(employees, currentPage);

    prevPageButton.disabled = currentPage <= 1;
    nextPageButton.disabled = currentPage >= totalPages;

    nextPageButton.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            displayEmployees(employees, currentPage);
            prevPageButton.disabled = false;
        }
        if (currentPage === totalPages) {
            nextPageButton.disabled = true;
        }
    });

    prevPageButton.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            displayEmployees(employees, currentPage);
            nextPageButton.disabled = false;
        }
        if (currentPage === 1) {
            prevPageButton.disabled = true;
        }
    });
}

async function init() {
    const employees = await fetchEmployees();
    handlePagination(employees);
}

init();

===== CSS =====


 
#table-container {
    margin-bottom: 20px;
}

#employee-table {
    border-collapse: collapse;
    width: 100%;
}

#employee-table th, #employee-table td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

#employee-table th {
    background-color: #f2f2f2;
}

#pagination-container {
    text-align: center;
}

#prev-page, #next-page {
    margin: 0 10px;
}

===== JSON fájl =====


{
    "employees": [
        {"id": 1, "name": "Lajos", "age": 35, "position": "fejlesztő"},
        {"id": 2, "name": "Katalin", "age": 28, "position": "tervező"},
        {"id": 3, "name": "Gábor", "age": 40, "position": "projektvezető"},
        {"id": 4, "name": "Éva", "age": 33, "position": "tesztelő"},
        {"id": 5, "name": "Máté", "age": 45, "position": "analitikus"},
        {"id": 6, "name": "Anita", "age": 29, "position": "fejlesztő"},
        {"id": 7, "name": "Péter", "age": 38, "position": "tervező"},
        {"id": 8, "name": "Tímea", "age": 31, "position": "projektvezető"},
        {"id": 9, "name": "Bence", "age": 42, "position": "tesztelő"},
        {"id": 10, "name": "Eszter", "age": 27, "position": "analitikus"},
        {"id": 11, "name": "Zoltán", "age": 36, "position": "fejlesztő"},
        {"id": 12, "name": "Judit", "age": 30, "position": "tervező"},
        {"id": 13, "name": "Gergő", "age": 39, "position": "projektvezető"},
        {"id": 14, "name": "Emese", "age": 32, "position": "tesztelő"},
        {"id": 15, "name": "Márk", "age": 41, "position": "analitikus"},
        {"id": 16, "name": "Hajnalka", "age": 26, "position": "fejlesztő"},
        {"id": 17, "name": "Bálint", "age": 37, "position": "tervező"},
        {"id": 18, "name": "Nóra", "age": 43, "position": "projektvezető"},
        {"id": 19, "name": "Attila", "age": 34, "position": "tesztelő"},
        {"id": 20, "name": "Dóra", "age": 29, "position": "analitikus"},
        {"id": 21, "name": "Pál", "age": 38, "position": "fejlesztő"},
        {"id": 22, "name": "Beáta", "age": 31, "position": "tervező"},
        {"id": 23, "name": "Zsolt", "age": 40, "position": "projektvezető"},
        {"id": 24, "name": "Júlia", "age": 33, "position": "tesztelő"},
        {"id": 25, "name": "Tamás", "age": 44, "position": "analitikus"},
        {"id": 26, "name": "Anna", "age": 28, "position": "fejlesztő"},
        {"id": 27, "name": "György", "age": 35, "position": "tervező"},
        {"id": 28, "name": "Zsuzsa", "age": 42, "position": "projektvezető"},
        {"id": 29, "name": "Péter", "age": 39, "position": "tesztelő"},
        {"id": 30, "name": "Krisztina", "age": 30, "position": "analitikus"}
    ]
}