A simple way to do pagination with bootstrap's style.
- Bootstrap.css
- jQuery
Set the paginator in a element.
<div id="paginator"></div>
$('#paginator').simplePaginator({
totalPages: 10,
pageChange: function(page) {
console.log(page);
}
})
Only totalPages
and pageChange
function are necessary to the paginator works.
This is all the options available in the paginator:
totalPages
: total pages available in the paginator.maxButtonsVisible
: total of numeric buttons visible in the paginator. Default is 5.currentPage
: page selected. Default is 1.nextLabel
: text shown in thenext
button.prevLabel
: text shown in theprev
button.firstLabel
: text shown in thefirst
button.lastLabel
: text shown in thelast
button.clickCurrentPage
: Specify if the paginator click in the currentButton. Default istrue
pageChange
: function called when a page is Changed.
The simple-bootstrap-paginator
accepts the user change the total pages:
<div id="paginator"></div>
var pag = $('#paginator').simplePaginator({
totalPages: 10,
pageChange: function(page) {
console.log(page);
}
})
pag.simplePaginator('setTotalPages', 20);