pagination dynamique

web/html/users.html

@@ -157,9 +157,12 @@
             
           </tbody>
         </table>
-        <div id="page" class="hidden">
+        <nav aria-label="Page navigation" class="hidden" id="page">
-          <a href="#" id="previous">Précédent</a><span><a href="#"></a>1</span><a href="#" id="next">Suivant</a>
+          <ul class="pagination justify-content-center">
-        </div>
+            <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>

web/js/users.js

@@ -13,11 +13,33 @@ 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");
+      }
     }
     
+
 });
 
 instance.get("users", {withCredentials: true, params :{ page:0, nbPages: nbPages}}).then(function(response){