kkpager.js为依赖于Jquery的分页插件分页插件官网
分页样式
#kkpager{clear:both; color:#666666; padding:5px 0 5px 0 ; font-size:13px; height:14px; line-height: 14px;}
#kkpager a{ float: left; border: 1px solid #e6e6e6; display: inline; padding: 3px 6.4px; margin-right: 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; cursor: pointer; background: #ffffff; text-decoration:none; color:#333333 }
#kkpager span.disabled{ float: left; display: inline; padding: 3px; margin-right: 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border:1px solid #ffffff; background-color:#6ab4f7; color:#ffffff; }
#kkpager span.curr{ float: left; border: 1px solid #ffffff; display: inline; padding: 3px 6.4px; margin-right: 3px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color:#6ab4f7; color:#ffffff; }
#kkpager a:hover{ border:1px solid #ffffff; background-color:#6ab4f7; color:#ffffff; }
#kkpager span.normalsize{ }
#kkpager_gopage_wrap{ position:relative; left :0 ; top :0 ; }
#kkpager_btn_go { width:14px; height:18px; border :0 ; overflow:hidden; line-height:140%; padding :0 ; margin :0 ; text-align:center; cursor:pointer; background-color:#FF6600; color:#FFF; position:absolute; left :0 ; top:-2px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display:none; }
#kkpager_btn_go_input{ width:16px; height:14px; color:#000000; text-align:center; margin-left:1px; margin-right:1px; border:1px solid #e6e6e6; position:relative; -moz-border-radius: 3px; -webkit-border-radius: 3px; left :0 ; top :0 ; outline:none; }
#kkpager_btn_go_input.focus{ border-color:#ffffff; }
#kkpager .pageBtnWrap{ float:left; }
#kkpager .infoTextAndGoPageBtnWrap{ float:right; }
#kkpager .spanDot{ float:left; margin-right:5px; }
#kkpager .currPageNum{ color:#FD7F4D; }
#kkpager .infoTextAndGoPageBtnWrap{ padding-top:5px; }
jquery ajax 调用插件，异步加载重新生成分页后，点击的页数还和首次加载一样
//加true 强制重新加载config配置
kkpager.generPageHtml({
pno:page,
total:totalPage,
mode:'click',
click:function(n){
this.selectPage(n);
return false;
}
},true);
按查询条件重新生成数据和分页，点击分页事件后totalpage 和totalrecord 和没加条件查询的数据一样。
主要原因是因为客户端不会帮你保留总页码数和总条数，
所以在按查询条件重新生成数据时，用hidden按钮绑定你的总页数和总条数
下面是ajax 调用后台数据，返回的总页数和总条数，都存放在hidden里了
$("#totalpages").val(totalPage); //绑定获取的总页数
$("#totalRecords").val(totalRecords);//绑定获取的总条数
if (!pageNo) {
pageNo = 1;
}
if (totalRecords > 0) {
FkeepPage(pageNo, totalPage, totalRecords); //调用分页插件
}
else {
$("#kkpager").html("<div style=‘text-align:center‘>没有符合条件的数据</div>")
}
queryInfoTable(tablename, pageSize, pageNo, where); //加载表格数据
调用kkpager
kkpager.generPageHtml({
pno: pageNo,
//总页码
total: totalPage,
//总数据条数
totalRecords: totalRecords,
mode: ‘click‘,//默认值是link，可选link或者click
click: function (n) {
// do something
// this.selectPage(n); //默认的，因为不能符合我的要求改成下面的
this.selectPage(n, $("#totalpages").val(), $("#totalRecords").val());
queryInfoTable(tablename, pageSize, n, where); //加载表格数据
return false;
}
},true);//加true 默认没有，因为页码数不更新，所以加上了
源码修改
//不刷新页面直接手动调用选中某一页码
selectPage: function (n) {
this.generPageHtml(this._config,true);
},
//改为
//不刷新页面直接手动调用选中某一页码
selectPage: function (n, b, c) {
this._config[‘pno‘] = n;
this._config[‘total‘] = b;
this._config[‘totalRecords‘] = c;
this.generPageHtml(this._config,true);
},
