63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
</head>
|
|
<body>
|
|
<div id="pagination">
|
|
<button id="prev">Předchozí</button>
|
|
<span id="currentPage">1</span>
|
|
<button id="next">Další</button>
|
|
</div>
|
|
|
|
<div id="content"></div>
|
|
<script>
|
|
const pagination = document.getElementById('pagination');
|
|
const content = document.getElementById('content');
|
|
const prevButton = document.getElementById('prev');
|
|
const nextButton = document.getElementById('next');
|
|
const currentPageSpan = document.getElementById('currentPage');
|
|
|
|
const data = [
|
|
"Položka 1", "Položka 2", "Položka 3", "Položka 4", "Položka 5",
|
|
"Položka 6", "Položka 7", "Položka 8", "Položka 9", "Položka 10"
|
|
];
|
|
|
|
const itemsPerPage = 3;
|
|
let currentPage = 1;
|
|
|
|
function displayItems() {
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = startIndex + itemsPerPage;
|
|
const pageItems = data.slice(startIndex, endIndex);
|
|
|
|
content.innerHTML = '';
|
|
pageItems.forEach(item => {
|
|
const itemElement = document.createElement('p');
|
|
itemElement.textContent = item;
|
|
content.appendChild(itemElement);
|
|
});
|
|
}
|
|
|
|
function updatePagination() {
|
|
currentPageSpan.textContent = currentPage;
|
|
prevButton.disabled = currentPage === 1;
|
|
nextButton.disabled = currentPage * itemsPerPage >= data.length;
|
|
}
|
|
|
|
displayItems();
|
|
updatePagination();
|
|
|
|
prevButton.addEventListener('click', () => {
|
|
currentPage--;
|
|
displayItems();
|
|
updatePagination();
|
|
});
|
|
|
|
nextButton.addEventListener('click', () => {
|
|
currentPage++;
|
|
displayItems();
|
|
updatePagination();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|