Package available on npm
npm install bootpagInclude plugin script in your html page
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootpag@5.0.0/dist/jquery.bootpag.min.js"></script> Then prepare empty html element which should contain pagination ( bootpag will create pagination list).
After page load init bootpag with number of total pages $('.my-element').bootpag({total: 15}) .
From now on you can listen for page changes $('.my-element').on("page", function(event, num){});
<!doctype html> <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootpag@5.0.0/dist/jquery.bootpag.min.js"></script> </head> <body> <div id="content">Dynamic Content goes here</div> <div id="page-selection">Pagination goes here</div> <script> // init bootpag $('#page-selection').bootpag({ total: 10 }).on("page", function(event, /* page number here */ num){ // load content from server here and update DOM, for now just some text $("#content").html("Dynamic content loaded for page " + num); }); </script> </body> </html> Parameters $(element).bootpag({...})
total number of pages maxVisible maximum number of visible pages page page to show on start leaps next/prev buttons move over one page or maximum visible pages next text (default » ) prev text (default « ) href template for pagination links (default javascript:void(0); ) hrefVariable variable name in href template for page number (default {{number}} ) firstLastUse do we ant first and last (default true ) first name of first (default 'FIRST' ) last name of last (default 'LAST' ) wrapClass css class for wrap (default 'pagination' ) activeClass css class for active (default 'active' ) disabledClass css class for disabled (default 'disabled' ) nextClass css class for next (default 'next' ) prevClass css class for prev (default 'prev' ) lastClass css class for last (default 'last' ) firstClass css class for first (default 'first' ) itemClass css class added to every <li> (default 'page-item' ) linkClass css class added to every <a> (default 'page-link' ) Events available on bootpag object
page on page click event object num page number clicked $('.demo1').bootpag({ total: 5 }).on("page", function(event, num){ $(".content").html("Page " + num); // or some ajax content loading... // ... after content load -> change total to 10 $(this).bootpag({total: 10, maxVisible: 10}); });$('.demo2').bootpag({ total: 23, page: 3, maxVisible: 10 }).on('page', function(event, num){ $(".content2").html("Page " + num); // or some ajax content loading... });"#pro-page-{{number}}" . $('.demo3').bootpag({ total: 9, page: 5, maxVisible: 6, href: "#pro-page-{{number}}", leaps: false, next: 'next', prev: null }).on('page', function(event, num){ $(".content3").html("Page " + num); // or some ajax content loading... });$('.demo4_top,.demo4_bottom').bootpag({ total: 50, page: 2, maxVisible: 5, leaps: true, firstLastUse: true, first: '<span aria-hidden="true">←</span>', last: '<span aria-hidden="true">→</span>', wrapClass: 'pagination', activeClass: 'active', disabledClass: 'disabled', nextClass: 'next', prevClass: 'prev', lastClass: 'last', firstClass: 'first' }).on("page", function(event, num){ $(".content4").html("Page " + num); // or some ajax content loading... });