niklas.ortmann/webprogrammierung
0
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

WIP: Anpassung der results seite und erstellung der script-datei #37

Draft
viratex wants to merge 24 commits from SuchergebnisseJS into dev
pull from: SuchergebnisseJS
merge into: niklas.ortmann:dev
Conversation 3 Commits 24 Files Changed 6
+36 -58
2 changed files with 36 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b3c74c2172 - Show all commits
content/search-results.php
+7 -15
View File
@@ -27,7 +27,8 @@ if ($currentPage < 1) {
$offset = ($currentPage - 1) * $limit;
// Nur die Ergebnisse für die aktuelle Seite ausschneiden
$results = array_slice($all_results, $offset, $limit);
//$results = array_slice($all_results, $offset, $limit);
$results = $all_results;
$resultCount = count($results);
?>
2
 @@ -171,20 +172,11 @@ $resultCount = count($results);
</div>
<div class="s-res-page-navigation">
<button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage - 1; ?>" <?php echo $currentPage <= 1 ? 'disabled' : ''; ?>>
«
</button>
<!-- Dynamische Seitenzahlen -->
<?php for ($i = 1; $i <= $totalPages; $i++): ?>
<button type="button"
class="s-res-page-btn <?php echo $i === $currentPage ? 's-res-page-btn-active' : ''; ?>"
data-page="<?php echo $i; ?>">
<?php echo $i; ?>
</button>
<?php endfor; ?>
<button type="button" class="s-res-page-btn" data-page="<?php echo $currentPage + 1; ?>" <?php echo $currentPage >= $totalPages ? 'disabled' : ''; ?>>
»
</button>
<button type="button" class="s-res-page-btn" id="prev-page-btn" data-page="0">«</button>
<span id="dynamic-page-numbers"></span>
<button type="button" class="s-res-page-btn" id="next-page-btn" data-page="2">»</button>
</div>
</div>
js/filter.js
+29 -43
View File
@@ -1,4 +1,3 @@
let currentClientPage = 1;
const itemsPerPage = 10;
@@ -11,24 +10,25 @@ function initFilter() {
updateVisibility();
filterSelect.addEventListener('change', function() {
currentClientPage = 1; // Bei Filterwechsel zurück auf Seite 1
currentClientPage = 1;
updateVisibility();
});
const navigationContainer = document.querySelector('.s-res-page-navigation');
if (navigationContainer) {
navigationContainer.addEventListener('click', function(e) {
const button = e.target.closest('.s-res-page-btn');
if (!button || button.disabled) return;
const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
pageButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
e.stopPropagation();
const targetPage = this.getAttribute('data-page');
const targetPage = button.getAttribute('data-page');
if (targetPage) {
currentClientPage = parseInt(targetPage, 10);
updateVisibility();
}
}, true);
});
});
}
}
function updateVisibility() {
@@ -37,11 +37,9 @@ function updateVisibility() {
const selectedCategory = filterSelect.value.toLowerCase().trim();
const cards = listContainer.querySelectorAll('.s-res-item');
// filtern
let visibleCards = [];
cards.forEach(card => {
const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim();
if (selectedCategory === 'all' || cardCategory.includes(selectedCategory) || selectedCategory.includes(cardCategory)) {
visibleCards.push(card);
} else {
@@ -49,11 +47,9 @@ function updateVisibility() {
}
});
// nur 10 karten anzeigen
const totalVisible = visibleCards.length;
const totalPages = Math.max(1, ceil(totalVisible / itemsPerPage));
const totalPages = Math.max(1, Math.ceil(totalVisible / itemsPerPage));
// aktuelle seite validieren
if (currentClientPage < 1) currentClientPage = 1;
if (currentClientPage > totalPages) currentClientPage = totalPages;
@@ -68,38 +64,28 @@ function updateVisibility() {
}
});
// update der seitenzahl
updatePaginatorUI(currentClientPage, totalPages);
}
function updatePaginatorUI(currentPage, totalPages) {
const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
pageButtons.forEach(button => {
const targetPage = button.getAttribute('data-page');
if (button.textContent.includes('«')) {
button.setAttribute('data-page', currentPage - 1);
button.disabled = (currentPage <= 1);
} else if (button.textContent.includes('»')) {
button.setAttribute('data-page', currentPage + 1);
button.disabled = (currentPage >= totalPages);
} else {
const pageNum = parseInt(button.textContent.trim(), 10);
// Falls es die Seite im neuen Filter gar nicht mehr gibt -> Button verstecken
if (pageNum > totalPages) {
button.style.display = 'none';
} else {
button.style.display = 'inline-block';
if (pageNum === currentPage) {
button.classList.add('s-res-page-btn-active');
} else {
button.classList.remove('s-res-page-btn-active');
}
}
}
});
const prevBtn = document.getElementById('prev-page-btn');
const nextBtn = document.getElementById('next-page-btn');
const numbersContainer = document.getElementById('dynamic-page-numbers');
if (!prevBtn || !nextBtn || !numbersContainer) return;
prevBtn.setAttribute('data-page', currentPage - 1);
prevBtn.disabled = (currentPage <= 1);
nextBtn.setAttribute('data-page', currentPage + 1);
nextBtn.disabled = (currentPage >= totalPages);
let buttonsHTML = '';
for (let i = 1; i <= totalPages; i++) {
const activeClass = (i === currentPage) ? 's-res-page-btn-active' : '';
buttonsHTML += `<button type="button" class="s-res-page-btn ${activeClass}" data-page="${i}">${i}</button> `;
}
numbersContainer.innerHTML = buttonsHTML;
}
// Hilfsfunktion für Math.ceil in JS