const items = [
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
`
`,
];
// === SETTINGS ===
const itemsPerPage = 4;
const maxPageButtons = 2;
// === STATE ===
let currentPage = 1;
// === DOM ===
const gridEl = document.getElementById("grid-4");
const statusEl = document.getElementById("status-4");
const prevBtn = document.getElementById("prevBtn-4");
const nextBtn = document.getElementById("nextBtn-4");
const pageButtonsEl = document.getElementById("pageButtons-4");
const pageIndicatorEl = document.getElementById("pageIndicator-4");
function totalPages() {
return Math.max(1, Math.ceil(items.length / itemsPerPage));
}
function clampPage(p) {
return Math.min(Math.max(1, p), totalPages());
}
function itemsForPage(p) {
const start = (p - 1) * itemsPerPage;
return items.slice(start, start + itemsPerPage);
}
function buildPageModel(page, total) {
if (total <= maxPageButtons) {
return Array.from({ length: total }, (_, i) => i + 1);
}
const model = [];
const delta = 1;
const left = Math.max(2, page - delta);
const right = Math.min(total - 1, page + delta);
model.push(1);
if (left > 2) model.push("…");
for (let p = left; p <= right; p++) model.push(p);
if (right < total - 1) model.push("…");
model.push(total);
return model;
}
function renderItems() {
const total = totalPages();
currentPage = clampPage(currentPage);
const pageItems = itemsForPage(currentPage);
// HTML-Strings rendern:
gridEl.innerHTML = pageItems.join("");
// Optional: Status
const from = items.length ? (currentPage - 1) * itemsPerPage + 1 : 0;
const to = Math.min(currentPage * itemsPerPage, items.length);
statusEl.textContent = `Zeige ${from}–${to} von ${items.length} Einträgen`;
pageIndicatorEl.textContent = `Seite ${currentPage} von ${total}`;
}
function renderPagination() {
const total = totalPages();
currentPage = clampPage(currentPage);
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === total;
pageButtonsEl.innerHTML = "";
const model = buildPageModel(currentPage, total);
for (const entry of model) {
if (entry === "…") {
const span = document.createElement("span");
span.className = "ellipsis";
span.textContent = "…";
pageButtonsEl.appendChild(span);
continue;
}
const btn = document.createElement("button");
btn.type = "button";
btn.textContent = String(entry);
btn.className = entry === currentPage ? "active" : "";
btn.setAttribute("aria-current", entry === currentPage ? "page" : "false");
btn.addEventListener("click", () => {
currentPage = entry;
renderAll();
});
pageButtonsEl.appendChild(btn);
}
}
function renderAll() {
renderItems();
renderPagination();
}
prevBtn.addEventListener("click", () => {
currentPage = clampPage(currentPage - 1);
renderAll();
});
nextBtn.addEventListener("click", () => {
currentPage = clampPage(currentPage + 1);
renderAll();
});
renderAll();
