From 19e7975b1f3b9490f328c0ab30d093213c0f7189 Mon Sep 17 00:00:00 2001
From: Valentin CZERYBA <valcze80@gmail.com>
Date: Sun, 7 Aug 2022 17:21:26 +0200
Subject: [PATCH] pagination dynamique

---
 web/html/users.html |  9 ++++++---
 web/js/users.js     | 24 +++++++++++++++++++++++-
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/web/html/users.html b/web/html/users.html
index 6ab290b..cdf82a6 100644
--- a/web/html/users.html
+++ b/web/html/users.html
@@ -157,9 +157,12 @@
             
           </tbody>
         </table>
-        <div id="page" class="hidden">
-          <a href="#" id="previous">Précédent</a><span><a href="#"></a>1</span><a href="#" id="next">Suivant</a>
-        </div>
+        <nav aria-label="Page navigation" class="hidden" id="page">
+          <ul class="pagination justify-content-center">
+            <li class="page-item disabled" id="previousPage"><a class="page-link" href="#"  tabindex="-1" aria-disabled="true">Précédent</a></li>
+            <li class="page-item"><a class="page-link" href="/html/users.html?page=1">1</a></li>         
+            <li class="page-item" id="nextPage"> <a class="page-link" href="#">Suivant</a></li>
+          </ul>
       </div>
     </main>
   </div>
diff --git a/web/js/users.js b/web/js/users.js
index fbe384c..79d2ad7 100644
--- a/web/js/users.js
+++ b/web/js/users.js
@@ -13,10 +13,32 @@ instance.get("users/count",  { withCredentials: true }).then(function(response){
     }
 
     if(total > 1){
-
       document.getElementById("page").classList.remove("hidden");
+      var pageCurrent = getQuery("page");
+      var page = 1;
+      if(pageCurrent.length > 0){
+        page = Number.parseInt(pageCurrent);
+      }
 
+      
+      for (var i=0; i<total; i++){
+        var liPage = document.querySelectorAll(".page-item")[i+1];
+        var cloneLi = liPage.cloneNode(true);
+        liPage.after(cloneLi);
+        var newPage = i + 2;
+        var aPage = document.querySelectorAll(".page-item")[newPage].querySelector("a");
+        aPage.text=newPage;
+        aPage.href="/html/users.html?page="+newPage;
+      }
+      document.querySelectorAll(".page-item")[page].classList.add("active");
+      if(page != 1){
+        document.querySelectorAll(".page-item")[0].classList.remove("disabled");
+      }
+      if(page == total){
+        document.querySelectorAll(".page-item")[page].classList.add("disabled");
+      }
     }
+    
 
 });