引用
<link href="css/jBootstrapPage.css" rel="stylesheet"/>
<script src="js/jBootstrapPage.js"></script>
配置
<div>
<ul class="pagination"></ul>
</div>
<script type="text/javascript">
var totalCount = 1;
$(function(){
renderPage(1,1,totalCount);
});
function renderPage(pageSize,selectedPageNo,total) {
$(".pagination").jBootstrapPage({
pageSize : pageSize,
total : total,
maxPageButton:total/pageSize+1,
lastSelectedIndex : selectedPageNo,
onPageClicked: function(obj, pageIndex) {
//ajax get page data
getData(page,size);
}
});
}
</script>
使用
function getData(page,size) {
var data = {"keyword": var2,"page":page,"size":size};
$.ajax({
url: 'url',
type: 'GET',
jsonp: 'callback',
data: data,
success: function (data, status) {
if (status == 'success') {
//update data
totalCount = data.totalElements;
renderPage(size,page+1,totalCount);
}
},
error: function (data, status) {
if (status == "error") {
console.log(data);
}
}
});
}
修改源码的init函数
主要是解决重新render之后选中页面的问题
function init() {
$this.find('li').remove();
c.maxPages = Math.ceil(c.total/c.pageSize);
if(c.maxPages < 1) return;
$this.append('<li class="disabled"><a class="first" href="#">«</a></li>');
$this.append('<li class="disabled"><a class="pre" href="#">上一页</a></li>');
var pageCount = c.maxPages < c.maxPageButton ? c.maxPages : c.maxPageButton;
var pNum = 0;
for(var index = 1; index <= pageCount; index++) {
pNum++;
$this.append('<li class="page" pNum="'+pNum+'"><a href="#" page="'+index+'">'+index+'</a></li>');
}
$this.append('<li class="disabled"><a class="next" href="#">下一页</a></li>');
$this.append('<li><a class="last" href="#">»</a></li>');
if(c.maxPageButton > c.maxPages) {
$this.find('li a.next').parent().addClass("disabled");
$this.find('li a.last').parent().addClass("disabled");
}else {
$this.find('li a.next').parent().removeClass("disabled");
$this.find('li a.last').parent().removeClass("disabled");
}
//主要是这部分
if(c.lastSelectedIndex){
$this.find('li.active').removeClass('active');
var selectedBtn = $this.find('li.page').find('a[page="'+(c.lastSelectedIndex)+'"]');
selectedBtn.parent().addClass('active');
}
//$this.find('li:nth-child(3)').addClass('active');
firstBtn = $this.find('li a.first').parent();
preBtn = $this.find('li a.pre').parent();
lastBtn = $this.find('li a.last').parent();
nextBtn = $this.find('li a.next').parent();
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。