Táblázat lapozása

Szerző: Sallai András
Copyright © 2024, Sallai András
Szerkesztve: 2024
Licenc: CC Attribution-Share Alike 4.0 International
Web: https://szit.hu

HTML

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dolgozók</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
<div id="table-container">
    <table id="employee-table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Név</th>
                <th>Kor</th>
                <th>Pozíció</th>
            </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>
</div>
 
<div id="pagination-container">
    <button id="prev-page">Előző</button>
    <button id="next-page">Következő</button>
</div>
 
<script src="app.js"></script>
</body>
</html>

JavaScript

app.js

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 = `
            <td>${employee.id}</td>
            <td>${employee.name}</td>
            <td>${employee.age}</td>
            <td>${employee.position}</td>
        `;
        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

style.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.json

{
    "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"}
    ]
}