js sortiert die Ergebnisse

content/search-results.php

@@ -4,6 +4,12 @@ if (session_status() === PHP_SESSION_NONE) {
 }
 
 $all_results = $_SESSION["search_results"] ?? [];
+?>
+<!-- Übergabe der rohen PHP-Ergebnisse an JavaScript -->
+<script id="search-data-json" type="application/json">
+    <?php echo json_encode($all_results); ?>
+</script>
+<?php
 $query = $_SESSION["search_query"] ?? "";
 $totalResultsCount = count($all_results);
 
@@ -178,13 +184,33 @@ $resultCount = count($results);
             </div>
 
             <div class="s-res-page-navigation">
-                <button type="button" class="s-res-page-btn" id="prev-page-btn" data-page="0">«</button>
+                <!-- Vorherige Seite Link -->
+                <?php if ($currentPage > 1): ?>
+                    <a href="?page=<?php echo $currentPage - 1; ?>&limit=<?php echo $limit; ?>" class="s-res-page-btn" id="prev-page-btn" data-page="<?php echo $currentPage - 1; ?>">«</a>
+                <?php else: ?>
+                    <span class="s-res-page-btn disabled">«</span>
+                <?php endif; ?>
 
-                <span id="dynamic-page-numbers"></span>
+                <!-- Fallback-Seitenzahlen für Nutzer OHNE JavaScript -->
+                <span id="dynamic-page-numbers">
+        <noscript>
+            <?php for ($i = 1; $i <= $totalPages; $i++): ?>
+                <a href="?page=<?php echo $i; ?>&limit=<?php echo $limit; ?>" class="s-res-page-btn <?php echo $i === $currentPage ? 'active' : ''; ?>">
+                    <?php echo $i; ?>
+                </a>
+            <?php endfor; ?>
+        </noscript>
+    </span>
 
-                <button type="button" class="s-res-page-btn" id="next-page-btn" data-page="2">»</button>
+                <!-- Nächste Seite Link -->
+                <?php if ($currentPage < $totalPages): ?>
+                    <a href="?page=<?php echo $currentPage + 1; ?>&limit=<?php echo $limit; ?>" class="s-res-page-btn" id="next-page-btn" data-page="<?php echo $currentPage + 1; ?>">»</a>
+                <?php else: ?>
+                    <span class="s-res-page-btn disabled">»</span>
+                <?php endif; ?>
             </div>
 
+
         </div>
     </main>
 

js/paginator.js

@@ -1,27 +1,218 @@
+// Globale Variablen für den JavaScript-Betrieb
+let allItems = [];
+let filteredItems = [];
+let currentJsPage = 1;
+let jsLimit = 10;
+
 function initPaginator() {
-    const form = document.getElementById('search-form-id');
+    const dataContainer = document.getElementById('search-data-json');
-    const pageInput = document.getElementById('s-res-page-input');
+    if (!dataContainer) return;
-    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
 
-    pageButtons.forEach(button => {
+    // 1. Daten aus PHP-JSON-Schnittstelle laden
-        button.addEventListener('click', function() {
+    try {
-            if (this.disabled) return;
+        allItems = JSON.parse(dataContainer.textContent);
-
+    } catch (e) {
-            const targetPage = this.getAttribute('data-page');
+        console.error("Fehler beim Laden der Suchdaten:", e);
-
+        return;
-            if (targetPage && form && pageInput) {
-                pageInput.value = targetPage;
-                form.submit();
     }
-        });
+
+    // 2. Event-Listener für Live-Interaktionen im Browser registrieren
+    const sortRadios = document.querySelectorAll('.sort-radio');
+    const categorySelect = document.getElementById('category-filter');
+    const limitSelect = document.getElementById('s-res-per-page');
+
+    sortRadios.forEach(radio => radio.addEventListener('change', applyFiltersAndRender));
+    if (categorySelect) categorySelect.addEventListener('change', applyFiltersAndRender);
+    if (limitSelect) {
+        limitSelect.addEventListener('change', function() {
+            jsLimit = parseInt(this.value) || 10;
+            currentJsPage = 1; // Zurück auf Seite 1 bei Limit-Wechsel
+            applyFiltersAndRender();
         });
     }
 
-// ist das DOM bereits vollständig aufgebaut?
+    // Pfeil-Navigation (Vor / Zurück) abfangen
+    const prevBtn = document.getElementById('prev-page-btn');
+    const nextBtn = document.getElementById('next-page-btn');
+
+    if (prevBtn) {
+        prevBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (currentJsPage > 1) {
+                currentJsPage--;
+                renderListAndPagination();
+            }
+        });
+    }
+
+    if (nextBtn) {
+        nextBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const totalPages = Math.max(1, Math.ceil(filteredItems.length / jsLimit));
+            if (currentJsPage < totalPages) {
+                currentJsPage++;
+                renderListAndPagination();
+            }
+        });
+    }
+
+    // Initialer Start: Daten verarbeiten und anzeigen
+    // Liest das vom Server übergebene Limit aus
+    if (limitSelect) jsLimit = parseInt(limitSelect.value) || 10;
+    applyFiltersAndRender();
+}
+
+// Verarbeitet Sortierung + Filterung komplett im Browser (Serverentlastung)
+function applyFiltersAndRender() {
+    // KATEGORIE FILTERN
+    const categorySelect = document.getElementById('category-filter');
+    const activeCategory = categorySelect ? categorySelect.value : 'all';
+
+    if (activeCategory === 'all') {
+        filteredItems = [...allItems];
+    } else {
+        filteredItems = allItems.filter(item =>
+            item.category && item.category.toLowerCase() === activeCategory.toLowerCase()
+        );
+    }
+
+    // SORTIERUNG ANWENDEN
+    const activeSortRadio = document.querySelector('.sort-radio:checked');
+    const sortStyle = activeSortRadio ? activeSortRadio.value : 'alphabet';
+
+    if (sortStyle === 'alphabet') {
+        filteredItems.sort((a, b) => (a.title || '').localeCompare(b.title || '', 'de', { sensitivity: 'base' }));
+    } else if (sortStyle === 'likes') {
+        filteredItems.sort((a, b) => {
+            const countA = Array.isArray(a.likes) ? a.likes.length : (parseInt(a.likes) || 0);
+            const countB = Array.isArray(b.likes) ? b.likes.length : (parseInt(b.likes) || 0);
+            return countB - countA;
+        });
+    } else if (sortStyle === 'newest') {
+        filteredItems.sort((a, b) => (b.creationDate || '').localeCompare(a.creationDate || ''));
+    } else if (sortStyle === 'oldest') {
+        filteredItems.sort((a, b) => (a.creationDate || '').localeCompare(b.creationDate || ''));
+    }
+
+    // Nach dem Filtern/Sortieren springen wir zurück auf Seite 1
+    currentJsPage = 1;
+    renderListAndPagination();
+}
+
+// HTML-Listenansicht und Paginierungs-Zahlen neu aufbauen
+function renderListAndPagination() {
+    const listContainer = document.querySelector('.s-res-list');
+    const pageNumbersContainer = document.getElementById('dynamic-page-numbers');
+    if (!listContainer) return;
+
+    // Gesamtseitenzahl berechnen
+    const totalPages = Math.max(1, Math.ceil(filteredItems.length / jsLimit));
+    if (currentJsPage > totalPages) currentJsPage = totalPages;
+
+    // Meta-Text aktualisieren (Trefferanzeige)
+    const metaText = document.querySelector('.s-res-meta');
+    if (metaText) {
+        const queryText = metaText.textContent.split('"')[1] || '';
+        metaText.innerHTML = `${filteredItems.length} Treffer für Ihre Suchanfrage "${queryText}"`;
+    }
+
+    // 1. ERGEBNISLISTE IM DOM REINJECKTEN
+    listContainer.innerHTML = ''; // Vorherige Ergebnisse leeren
+
+    if (filteredItems.length === 0) {
+        listContainer.innerHTML = '<p>Keine Beiträge zu diesem Suchbegriff gefunden.</p>';
+        if (pageNumbersContainer) pageNumbersContainer.innerHTML = '';
+        updateArrowButtons(totalPages);
+        return;
+    }
+
+    // Ausschnitt für die aktuelle Seite berechnen (Offset)
+    const offset = (currentJsPage - 1) * jsLimit;
+    const pageItems = filteredItems.slice(offset, offset + jsLimit);
+
+    // HTML für die Zeilen generieren
+    pageItems.forEach(item => {
+        const likesCount = Array.isArray(item.likes) ? item.likes.length : (parseInt(item.likes) || 0);
+        const itemHtml = `
+            <div class="s-res-item" data-likes="${likesCount}" data-category="${(item.category || '').toLowerCase()}">
+                <div class="s-res-content">
+                    <h2 class="s-res-item-title">
+                        <a href="index.php?pfad=showArticle&id=${item.id}" class="s-res-link">${escapeHtml(item.title)}</a>
+                    </h2>
+                    <div class="s-res-meta-row">
+                        <p class="s-res-author">Von: <span class="s-res-author-name">${escapeHtml(item.author)}</span></p>
+                        <span class="s-res-likes">❤️ ${likesCount}</span>
+                    </div>
+                </div>
+                <div class="s-res-arrow">&rarr;</div>
+            </div>
+        `;
+        listContainer.insertAdjacentHTML('beforeend', itemHtml);
+    });
+
+    // 2. DYNAMISCHE SEITENZAHLEN GENERIEREN
+    if (pageNumbersContainer) {
+        pageNumbersContainer.innerHTML = ''; // Vorherige Zahlen leeren
+
+        // Erzeugt Klickbare Seitenzahlen im JS-Modus
+        for (let i = 1; i <= totalPages; i++) {
+            const pageBtn = document.createElement('button');
+            pageBtn.type = 'button';
+            pageBtn.className = `s-res-page-btn ${i === currentJsPage ? 'active' : ''}`;
+            pageBtn.innerText = i;
+
+            pageBtn.addEventListener('click', function() {
+                currentJsPage = i;
+                renderListAndPagination();
+            });
+
+            pageNumbersContainer.appendChild(pageBtn);
+        }
+    }
+
+    updateArrowButtons(totalPages);
+}
+
+// Steuert die Aktivierung/Deaktivierung der Vor- und Zurück-Pfeile
+function updateArrowButtons(totalPages) {
+    const prevBtn = document.getElementById('prev-page-btn');
+    const nextBtn = document.getElementById('next-page-btn');
+
+    if (prevBtn) {
+        if (currentJsPage <= 1) {
+            prevBtn.classList.add('disabled');
+            prevBtn.style.pointerEvents = 'none';
+        } else {
+            prevBtn.classList.remove('disabled');
+            prevBtn.style.pointerEvents = 'auto';
+        }
+    }
+
+    if (nextBtn) {
+        if (currentJsPage >= totalPages) {
+            nextBtn.classList.add('disabled');
+            nextBtn.style.pointerEvents = 'none';
+        } else {
+            nextBtn.classList.remove('disabled');
+            nextBtn.style.pointerEvents = 'auto';
+        }
+    }
+}
+
+// Hilfsfunktion gegen XSS-Injections im Browser
+function escapeHtml(text) {
+    if (!text) return '';
+    return text.toString()
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+// DOM-Ready Check
 if (document.readyState === 'loading') {
-    // Falls noch geladen wird, auf das Event warten
     document.addEventListener('DOMContentLoaded', initPaginator);
 } else {
-    // Falls das HTML bereits komplett da ist, sofort ausführen
     initPaginator();
 }