Pagination has been implemented

src/main/webapp/js/requests.js

@@ -122,5 +122,6 @@ function deleteRow(rowID) {
      .then(res => res.json())
      .then(res => console.log(res))
     toggleUpdateButton();
-
+    updatePagination();
+    deletePaginationButton();
 }
\ No newline at end of file

src/main/webapp/js/trainersInteraction.js

 let buttonId = "formButton";
-let formId = "insertTrainer"
+let formId = "insertTrainer";
+const itemsPerPage = 5;
+let currentPage = 1;
+let items
 
 
 function showForm() {
@@ -144,4 +147,69 @@ function toggleUpdateButton() {
     } else {
         updateButton.style.display = "none"; //Hide the button
     }
-}
\ No newline at end of file
+}
+
+function updatePagination() {
+    const table = document.querySelector(".col-8");
+    items = Array.from(table.getElementsByTagName('tr')).slice(1);
+}
+
+function showPage(page) {
+    const startIndex = (page - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+
+    items.forEach((item, index) => {
+        item.classList.toggle('d-none', index < startIndex || index >= endIndex);
+        updateActiveButtonStates();
+    })
+}
+
+function createPageButtons() {
+    const totalPages = Math.ceil(items.length/itemsPerPage)
+    const paginationContainer = document.querySelector(".pagination")
+
+    for(let i = 1; i <= totalPages; i++) {
+        const pageItem = document.createElement('li')
+        pageItem.classList.add('page-item')
+        // Assign a unique ID to the <li> element
+        pageItem.id = `page-item-${i}`;
+        const pageButton = document.createElement('a')
+        pageButton.classList.add('page-link')
+        pageButton.href = '#'; // Prevents the anchor from navigating
+        pageButton.textContent = `${i}`
+
+        pageItem.appendChild(pageButton);
+        paginationContainer.appendChild(pageItem)
+
+        pageButton.addEventListener('click', function (event) {
+            event.preventDefault()
+            currentPage = i;
+            showPage(i);
+        } )
+    }
+}
+
+function updateActiveButtonStates() {
+    const buttons = document.querySelectorAll('.pagination li')
+    buttons.forEach((button, index) => {
+        if ((index + 1) === currentPage) {
+            button.classList.add('active');
+        } else {
+            button.classList.remove('active');
+        }
+    })
+}
+
+function deletePaginationButton() {
+    const buttons = document.querySelector(".pagination")
+    if( currentPage !==  Math.ceil(items.length/itemsPerPage)) {
+        const itemToRemove = document.getElementById(`page-item-${currentPage}`)
+        if (buttons && itemToRemove) {
+            buttons.removeChild(itemToRemove)
+            currentPage--;
+            showPage(currentPage)
+        }
+
+    }
+}
+

src/main/webapp/style.css

+/* styles.css */
+.hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}

src/main/webapp/trainers.html

@@ -20,6 +20,9 @@
             .then(data => {
                 trainers = data;
                 createTrainerTable();
+                updatePagination();
+                createPageButtons();
+                showPage(currentPage);
             })
             .catch(err => {
                 console.error(`Unable to fetch Pokemon Trainers: ${err.status}`);
@@ -37,6 +40,9 @@
         <button id="formButton" class="btn btn-primary" type="button" onclick="showForm()">Add new Pokémon trainer</button>
         <button id="updateButton" class="btn btn-primary" type="button" onclick="showUpdateForm()" style="display: none">Update pokemon trainer details</button>
         <div id="insertTrainer"></div>
+        <br>
+        <ul class="pagination"> </ul>
+
     </div>
 
 </body>