基于js的分页插件使用

            这是一个基于淘宝分页功能的插件，基于 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前台，出来的效果如下