I want to show the pagination in this format of 1/4, and the next and previous buttons should work accordingly. I am asking for something like this; you can see the way it shows the pagination "https://jsfiddle.net/x9b2Lqm5/4/". Also, on the first and last pages, clicks should be disabled. You can see it at the bottom of the table. Please help me in order to accomplish this. I tried but couldn’t do it. That’s why I am looking for expert help.
const paginationNumbers = document.getElementById("pagination-numbers");
const paginatedList = document.getElementById("paginated-list");
const listItems = paginatedList.querySelectorAll("tbody tr");
const nextButton = document.getElementById("next-button");
const prevButton = document.getElementById("prev-button");
const paginationLimit = 2;
const pageCount = Math.ceil(listItems.length / paginationLimit);
let currentPage = 1;
const disableButton = (button) => {
button.classList.add("disabled");
button.setAttribute("disabled", true);
};
const enableButton = (button) => {
button.classList.remove("disabled");
button.removeAttribute("disabled");
};
const handlePageButtonsStatus = () => {
if (currentPage === 1) {
disableButton(prevButton);
} else {
enableButton(prevButton);
}
if (pageCount === currentPage) {
disableButton(nextButton);
} else {
enableButton(nextButton);
}
};
const handleActivePageNumber = () => {
document.querySelectorAll(".pagination-number").forEach((button) => {
button.classList.remove("active");
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex == currentPage) {
button.classList.add("active");
}
});
};
const appendPageNumber = (index) => {
const pageNumber = document.createElement("button");
pageNumber.className = "pagination-number";
pageNumber.innerHTML = index;
pageNumber.setAttribute("page-index", index);
pageNumber.setAttribute("aria-label", "Page " + index);
paginationNumbers.appendChild(pageNumber);
};
const getPaginationNumbers = () => {
for (let i = 1; i <= pageCount; i++) {
appendPageNumber(i);
}
};
const setCurrentPage = (pageNum) => {
currentPage = pageNum;
handleActivePageNumber();
handlePageButtonsStatus();
const prevRange = (pageNum - 1) * paginationLimit;
const currRange = pageNum * paginationLimit;
listItems.forEach((item, index) => {
item.classList.add("hidden");
if (index >= prevRange && index < currRange) {
item.classList.remove("hidden");
}
});
};
window.addEventListener("load", () => {
getPaginationNumbers();
setCurrentPage(1);
prevButton.addEventListener("click", () => {
setCurrentPage(currentPage - 1);
});
nextButton.addEventListener("click", () => {
setCurrentPage(currentPage + 1);
});
document.querySelectorAll(".pagination-number").forEach((button) => {
const pageIndex = Number(button.getAttribute("page-index"));
if (pageIndex) {
button.addEventListener("click", () => {
setCurrentPage(pageIndex);
});
}
});
});
</script> .result {
text-align: center;
padding-bottom: 20px;
width: 100%;
}
/* Responsive Table Start */
.rstable {
width: 100%;
margin: 0 auto;
padding: 16px 0px;
}
.rstable table {
font-family: calibri, sans-serif;
border-collapse: collapse;
font-size: 16px;
width: 100%;
font-weight: 400;
}
.rstable tr {
border-bottom: 1px solid #ccc;
}
.rstable tr td {
text-align: left;
padding: 9px;
color: #333;
}
.rstable th {
text-align: left;
padding: 10px 9px;
background: #004287;
color: #fff;
font-weight: 500;
}
.rstable tr:nth-child(even) {
background: #f9fbfdc4;
}
.rstable tr:nth-child(odd) {
background: #dae9f3;
}
.rstable tr td a {
color: #004287;
font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
.rstable table {
font-size: 15px;
}
}
@media screen and (max-width: 767px) {
.rstable table {
font-size: 16px;
font-weight: 400;
}
.rstable thead {
display: none;
}
.rstable td:first-child {
text-align: left;
display: inline-grid;
width: 90%;
}
.rstable td {
text-align: left;
display: inline-grid;
width: 26%;
vertical-align: top;
color: #333;
font-weight: 400;
}
.rstable td:before {
content: attr(data-title);
font-weight: 500;
padding-bottom: 5px;
font-size: 16px;
color: #000;
}
}
@media (min-width: 280px) and (max-width: 319px) {
.rstable td {
width: 23%;
}
}
/* Responsive Table Ends */
.arrow-right,
.arrow-left {
display: block;
margin: 10px auto;
width: 8px;
height: 8px;
border-top: 2px solid #000;
border-left: 2px solid #000;
}
.arrow-right {
transform: rotate(135deg);
}
.arrow-left {
transform: rotate(-45deg);
}
.hidden {
display: none;
}
.pagination-container {
width: calc(100% - 0rem);
display: flex;
align-items: center;
position: relative;
bottom: 0;
padding: 0rem 0;
justify-content: right;
/* text-align: center; */
}
.pagination-number, .pagination-button {
font-family: calibri, sans-serif;
font-size: 16px;
background-color: transparent;
border: none;
margin: 0.1rem 0.1rem;
cursor: pointer;
height: 2rem;
width: 2rem;
border-radius: 0.2rem;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
background: #fff;
}
.pagination-number.active {
color: #fff;
background: #0085b6;
} <!-- Result Start -->
<!-- Result Table Starts -->
<div class="rstable">
<table id="paginated-list">
<thead>
<tr>
<th>Train</th>
<th>Type</th>
<th>Zone</th>
<th>From</th>
<th>Dep</th>
<th>To</th>
<th>Arr</th>
<th>Dur</th>
<th>Halts</th>
<th>Runs On</th>
<th>Dist</th>
<th>Speed</th>
<th>Classes</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Train">15011 Kashi Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">97 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15012 Pushpak Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">96 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15013 Godan Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">95 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15014 Golden Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">94 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15015 Lucknow Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">93 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15016 SLN Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">92 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15017 Sitapur Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">91 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
<tr>
<td data-title="Train">15018 Darbhanga Express</td>
<td data-title="Type">SuperFast</td>
<td data-title="Zone">CR</td>
<td data-title="From">LTT</td>
<td data-title="Dep">15:30</td>
<td data-title="To">GKP</td>
<td data-title="Arr">06:15 +1 night</td>
<td data-title="Dur">7h 55m</td>
<td data-title="Halts">11</td>
<td data-title="Runs On">S - T - T F -</td>
<td data-title="Dist">632 km</td>
<td data-title="Speed">90 km/hr</td>
<td data-title="Classes">SL | 3A | 2A</td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; display: flex;align-items: center;">
<div class="pagination-container">
<button class="pagination-button" id="prev-button" aria-label="Previous page" title="Previous page">
<span class="arrow-left"></span>
</button>
<div id="pagination-numbers">
</div>
<button class="pagination-button" id="next-button" aria-label="Next page" title="Next page">
<span class="arrow-right"></span>
</button>
</div>
</div>
<!-- Result Table Ends -->
<!-- Script Starts -->
2
Answers
What are you expecting ? the buttons are successfully disabled when you inspect them, you maybe forgot to style them, and the active buttons are working pretty well, can you please describe the problem more & more ?
try to add this CSS property :
First of all, you’ll need to update how the output of the pagination buttons, since we are not making buttons, we’ll remove the function (
addEventListener('load'){...}) where it adds the buttons.Instead we’ll add 2 more elements to depict the current page and total pages.
When the page updates, it’ll update the current page from the element, also will check if its the 1st or last page in
handleActivePageNumber()(where we 1st enable all, but disable if they are last or first)That’s that… (also update the CSS to disable the cursor action when disabled, also you should use buttons instead of span for prev and next button.)