pagination recherche

public/styles/styleSearch.css

@@ -148,4 +148,63 @@ body.light-mode .filtre label {
     color: #000000;
     cursor: pointer;
     transition: all 0.3s ease; 
-}
+}
+
+/* ====== PAGINATION STYLES ====== */
+.pagination-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 20px 0;
+}
+
+.pagination-container select {
+    margin: 0 10px;
+    padding: 5px;
+    font-size: 16px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.pagination-container button {
+    background: var(--main-light-gradient);
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.pagination-container button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Spinner style */
+.spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #000;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
+    margin-left: 10px;
+    display: none;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Adaptation pour dark mode */
+body.dark-mode .pagination-container button {
+    background: var(--main-dark-gradient);
+    color: #fff;
+}
+
+body.dark-mode .pagination-container select {
+    border: 1px solid #555;
+    background: #333;
+    color: #fff;
+}

vue/search.php

@@ -2,25 +2,76 @@
 
     global $twig;
 
+    // Paramètres de la pagination
+    $perPage = 30;
+    $currentPage = isset($_GET['page']) ? (int)$_GET['page'] : 1;
+    if ($currentPage < 1) {
+        $currentPage = 1;
+    }
+
+    // Calcul du nombre total d'éléments et de pages
+    $totalItems = count($tq);
+    $totalPages = ceil($totalItems / $perPage);
+
+    // Découpage du tableau pour ne garder que les éléments de la page courante
+    $offset = ($currentPage - 1) * $perPage;
+    $quotesPaginated = array_slice($tq, $offset, $perPage);
+
     echo $twig->render('head.html.twig', array(
-        'title' => "Search",
-        'style' =>  "public/styles/styleSearch.css",
+        'title'   => "Search",
+        'style'   => "public/styles/styleSearch.css",
         'scripts' => array("public/script/theme-toggle.js")
     ));
 
     echo $twig->render('bandeau.html.twig');
-    echo $twig->render('filtre.html.twig',array(
-        'search'=>$search,
-        'type'=>$type,
+    echo $twig->render('filtre.html.twig', array(
+        'search' => $search,
+        'type'   => $type,
     ));
 
-
     echo $twig->render('quoteLittle.html.twig', [
-        'quotes' => $tq,
-        'titre' => "Résultats"
+        'quotes' => $quotesPaginated,
+        'titre'  => "Résultats"
     ]);
-    
+?>
+
+<div class="pagination-container">
+    <button id="prev-page" <?php if($currentPage <= 1) echo "disabled"; ?>>Page précédente</button>
+    <select id="page-selector">
+        <?php for($page = 1; $page <= $totalPages; $page++): ?>
+            <option value="<?php echo $page; ?>" <?php if($page == $currentPage) echo "selected"; ?>>Page <?php echo $page; ?></option>
+        <?php endfor; ?>
+    </select>
+    <button id="next-page" <?php if($currentPage >= $totalPages) echo "disabled"; ?>>Page suivante</button>
+    <div class="spinner" id="spinner"></div>
+</div>
+
+<script>
+document.getElementById('page-selector').addEventListener('change', function() {
+    document.getElementById('spinner').style.display = 'inline-block';
+    window.location.href = "?page=" + this.value;
+});
+
+document.getElementById('prev-page').addEventListener('click', function() {
+    var selector = document.getElementById('page-selector');
+    var newPage = parseInt(selector.value) - 1;
+    if(newPage >= 1) {
+        document.getElementById('spinner').style.display = 'inline-block';
+        window.location.href = "?page=" + newPage;
+    }
+});
+
+document.getElementById('next-page').addEventListener('click', function() {
+    var selector = document.getElementById('page-selector');
+    var newPage = parseInt(selector.value) + 1;
+    if(newPage <= <?php echo $totalPages; ?>) {
+        document.getElementById('spinner').style.display = 'inline-block';
+        window.location.href = "?page=" + newPage;
+    }
+});
+</script>
+
+<?php
     echo "</div>";
     //echo $twig->render('resultat.html.twig');
-    
-?>
+?>

vue/templates/bandeau.html.twig

@@ -3,6 +3,8 @@
         <a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" onmousedown="return false"></a>
         <img class='theme-icon' id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
         <a href="{{ racine }}/accueilQuiz"><img src="{{ racine }}/images/quizz.svg" alt="quizz" onmousedown="return false"></a>
+        <a href="{{racine}}/submit" class="createQuote"><img src="{{ racine }}/images/Vector.svg" onmousedown="return false"></img></a>
+
  
     </div>
     <div class="logo">
@@ -11,7 +13,6 @@
 
     <div class="user">
         <a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search"  onmousedown="return false"></a>
-        <a href="{{racine}}/submit" class="createQuote"><img src="{{ racine }}/images/Vector.svg" onmousedown="return false"></img></a>
         <a class="iconUser" href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user"  onmousedown="return false"></a>
     </div>
 </div>