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;
}