Created
April 24, 2025 08:49
-
-
Save dimkoug/791064b14fcd38a8f1a421d5b0b7b92e to your computer and use it in GitHub Desktop.
jquery pagination with many pages
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Smart Pagination Example</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| padding: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h3>Dynamic Pagination with Bootstrap</h3> | |
| <div id="pagination-container" class="mt-4"></div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | |
| <script> | |
| function generatePagination(totalPages, currentPage) { | |
| const $pagination = $('<ul class="pagination"></ul>'); | |
| function addNav(label, targetPage, disabled = false) { | |
| if (disabled) { | |
| $pagination.append(`<li class="page-item disabled"><span class="page-link">${label}</span></li>`); | |
| } else { | |
| $pagination.append(`<li class="page-item"><a class="page-link" href="#" data-page="${targetPage}">${label}</a></li>`); | |
| } | |
| } | |
| function addPage(page, active = false, disabled = false) { | |
| if (disabled) { | |
| $pagination.append(`<li class="page-item disabled"><span class="page-link">...</span></li>`); | |
| } else if (active) { | |
| $pagination.append(`<li class="page-item active"><span class="page-link">${page}</span></li>`); | |
| } else { | |
| $pagination.append(`<li class="page-item"><a class="page-link" href="#" data-page="${page}">${page}</a></li>`); | |
| } | |
| } | |
| // Navigation Buttons | |
| addNav("First", 1, currentPage === 1); | |
| addNav("Prev", currentPage - 1, currentPage === 1); | |
| // First page | |
| addPage(1, currentPage === 1); | |
| if (currentPage > 4) addPage('...', false, true); // leading ellipsis | |
| // Middle pages around current page | |
| for (let i = currentPage - 2; i <= currentPage + 2; i++) { | |
| if (i > 1 && i < totalPages) { | |
| addPage(i, i === currentPage); | |
| } | |
| } | |
| if (currentPage < totalPages - 3) addPage('...', false, true); // trailing ellipsis | |
| // Last page | |
| if (totalPages > 1) addPage(totalPages, currentPage === totalPages); | |
| // Navigation Buttons | |
| addNav("Next", currentPage + 1, currentPage === totalPages); | |
| addNav("Last", totalPages, currentPage === totalPages); | |
| return $pagination; | |
| } | |
| $(document).ready(function () { | |
| const totalPages = 1000; | |
| let currentPage = 1; | |
| function renderPagination() { | |
| const $pagination = generatePagination(totalPages, currentPage); | |
| $('#pagination-container').html($pagination); | |
| } | |
| $('#pagination-container').on('click', '.page-link', function (e) { | |
| e.preventDefault(); | |
| const targetPage = parseInt($(this).data('page')); | |
| if (!isNaN(targetPage) && targetPage !== currentPage) { | |
| currentPage = targetPage; | |
| renderPagination(); | |
| } | |
| }); | |
| renderPagination(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment