123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123 |
- function Pagination(paginatedList, paginationContainer, paginationLimit = 5, listItemTag = "li") {
- const createMainPagination = () => {
- paginationContainer.innerHTML =
- `
- <nav aria-label="Page navigation example">
- <ul class="pagination justify-content-center">
- <li class="page-item disabled" id="prev-button" tabindex="-1">
- <a class="page-link" href="${location.hash}" tabindex="-1">Previous</a>
- </li>
- <!--<li class="page-item"><a class="page-link" href="${location.hash}">1</a></li>
- <li class="page-item"><a class="page-link" href="${location.hash}">2</a></li>
- <li class="page-item"><a class="page-link" href="${location.hash}">3</a></li>-->
- <li class="page-item" id="next-button">
- <a class="page-link" href="${location.hash}">Next</a>
- </li>
- </ul>
- </nav>
- `;
- }
- createMainPagination();
- const listItems = paginatedList.querySelectorAll(listItemTag);
- const nextButton = paginationContainer.querySelectorAll("#next-button")[0];
- const prevButton = paginationContainer.querySelectorAll("#prev-button")[0];
- 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(".page-item").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("li");
- pageNumber.classList.add("page-item");
- pageNumber.innerHTML = `<a class="page-link" href="#${location.hash}">${index}</a>`;
- pageNumber.setAttribute("page-index", index);
- pageNumber.setAttribute("aria-label", "Page " + index);
- nextButton.parentNode.insertBefore(pageNumber, nextButton);
- };
- const getPaginationNumbers = () => {
- for (let i = 1; i <= pageCount; i++) {
- appendPageNumber(i);
- }
- };
- const setCurrentPage = (pageNum) => {
- currentPage = pageNum;
- if (currentPage < 1 || currentPage > pageCount)
- return;
- handleActivePageNumber();
- handlePageButtonsStatus();
- const prevRange = (pageNum - 1) * paginationLimit;
- const currRange = pageNum * paginationLimit;
- listItems.forEach((item, index) => {
- item.classList.add("d-none");
- if (index >= prevRange && index < currRange) {
- item.classList.remove("d-none");
- }
- });
- };
- function init() {
- getPaginationNumbers();
- setCurrentPage(1);
- prevButton.addEventListener("click", (event) => {
- event.preventDefault();
- setCurrentPage(currentPage - 1);
- });
- nextButton.addEventListener("click", (event) => {
- event.preventDefault();
- setCurrentPage(currentPage + 1);
- });
- document.querySelectorAll(".page-item").forEach((button) => {
- const pageIndex = Number(button.getAttribute("page-index"));
- if (pageIndex) {
- button.childNodes[0].addEventListener("click", (event) => {
- event.preventDefault();
- if (pageIndex && !button.classList.contains('disabled'))
- setCurrentPage(pageIndex);
- });
- }
- });
- }
- init();
- }
|