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...
});