Skip to content
Snippets Groups Projects
Commit 841d01d0 authored by CarimPopa's avatar CarimPopa
Browse files

Pagination has been implemented

parent ac8f5f86
Branches newFeature1
No related tags found
No related merge requests found
......@@ -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
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)
}
}
}
/* styles.css */
.hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment