这是一个基于淘宝分页功能的插件，基于 maven项目，sping mvc+mybatis框架所完成的功能。开发步骤如下：
1.使用js插件 ：在线测试链接地址：http://pgkk.github.io/kkpager/example/pager_test.html，插件如附件所示kkpager-1.2.rar
2.运用ajax功能，查询数据：
function search(n){
$.post("/fronts/alarm",{"deviceId":$("#deviceId").attr("value"),"type":$("#alarmType").val(),"stime":$("#datetimepicker").attr("value"),
"etime":$("#datetimepicker2").attr("value"),"pno":n},function call(data){
$("#alarmInf").find("[duty='alarm_var']").remove();
if(data!=null&&data!=""){
allData=data;
var totalPage=data.length/10;
if(data.length%10!=0){
totalPage++;
}
init1(totalPage,data.length);
var size=data.length;
if(size>10){size=10;}
addTable(0,size,data);
}else{
$("#kkpager").html("");
}
});
}
3.上面的init1(totalPage,data.length);功能就是初始化分页按钮，每次有新数据，则初始化一下分页按钮,
function init1(topage,tore){
var totalPage = topage;
var totalRecords = tore;
var pageNo = getParameter('pno');
if(!pageNo){
pageNo = 1;
}
$("#kkpager").html("");
//生成分页
//有些参数是可选的，比如lang，若不传有默认值
kkpager.init({
pno : pageNo,
//总页码
total : totalPage,
//总数据条数
totalRecords : totalRecords,
//链接前部
lang : {
firstPageText : '|<',
lastPageText : '>|',
prePageText : '<',
nextPageText : '>',
totalPageBeforeText : '共',
totalPageAfterText : '页',
totalRecordsAfterText : '条数据',
gopageBeforeText : '转到',
gopageButtonOkText : '确定',
gopageAfterText : '页',
buttonTipBeforeText : '第',
buttonTipAfterText : '页'
}
,
mode : 'click',//默认值是link，可选link或者click
click : function(n){
this.selectPage(n);
show_search(n);
return false;
}
});
kkpager.generPageHtml();
}
4.allData为缓存ajax查询到的 对象集合 ，mode : 'click',//默认值是link，可选link或者click
click : function(n){
this.selectPage(n);
show_search(n);
return false;
}
});操作表示每次选择新页面时，更改显示的页面，n表示显示第n页
5. show_search(n);表示具体的显示代码，function show_search(n){
$("#alarmInf").find("[duty='alarm_var']").remove();
if(n*10<allData.length){
var start=(n-1)*10;
var end=n*10;
addTable(start,end,allData);
}
else if((n-1)*10<allData.length<=n*10){
var start=(n-1)*10;
var end=allData.length;
addTable(start,end,allData);
}
}
页面每次显示10条，将对页面的逻辑判断放在js前台，出来的效果如下