Bootstrap风格的分页控件自适应的:
参考网址:nofollow" target="_blank" href="http://esimakin.github.io/twbs-pagination/">分页参考文档
1.风格样式:
2.首先引入js文件jQuery.twbsPagination.js
3.html页面
分页组件否则保留上次
查询的,一般来说很多问题出现与这三行
代码有关如:虽然数据正确但是
页码不对仍然为上一次
查询出的一致
$('#pagination-log').empty();
$('#pagination-log').removeData("twbs-pagination");
$('#pagination-log').unbind("page");
//将
页面的数据容器制空
$("#messagebody").empty();
//设置默认当前页
var pagenow = 1;
//设置默认总页数
var totalPage = 1;
//设置默认可见页数
var visiblecount = 5;
//加载
后台数据
页面
function loaddata() {
$.ajax({
url : "/tqyh/showUserloginfo",type : "post",data : {
"currentpage" : pagenow
},dataType : "json",success : function(data) {
var htmlobj = "";
totalPage = data.page.totalPage;//将
后台数据复制给总页数
totalcount = data.page.totalCount;
$("#userlogbody").empty();
$.each(data.userlog,function(index,userlog) {
htmlobj = htmlobj + "
|
"
+ "
LOCATION后台总页数与可见页数比较如果小于可见页数则可见页数设置为总页数,
if (totalPage < visiblecount) {
visiblecount = totalPage;
}
$('#pagination-log').twbsPagination({
totalPages : totalPage,visiblePages : visiblecount,version : '1.1',//
页面点击时触发事件
onPageClick : function(event,page) {
// 将当前页数重置为page
pagenow = page
//
调用后台获取数据
函数加载点击的
页码数据
loaddata();
}
});
},error : function(e) {
alert("s数据访问失败")
}
});
}
//
函数初始化是
调用内部
函数
loaddata();
};