js的一个分页逻辑

2019独角兽企业重金招聘Python工程师标准>>>

  /*

    页面显示的效果为[前10页 1 2 3 4 5 6 7 8 9 10 后10页],即一页显示10个页号

思路根据传入页面的当前页pageNo,运用Math.floor((lps.pageNo-1)/10)方法判断当前页号在第几页(0为第一页);

 */

     var divBegin = $("<div class='next'></div>");

    var prePage;

    var nextPage; 

// 判断当前"页号"在第几页

     var indexPage =  Math.floor((lps.pageNo-1)/10);

 // 表示在第1页显示，这时“前10页”按钮无效

     if(indexPage==0){

     prePage= $("<a href='javascript:' class='cur'>前10页</a>"); 

     }else{

     prePage= $("<a href='javascript:' οnclick='triggerCon({pageNo:"+(lps.pageNo-10)+"})' class='cur'>前10页</a>");

     }

 // 添加“前10页”按钮

     divBegin.append(prePage);

 // 查找当前"页号"所在页的“首页”

     var startPage = indexPage*10+1;

     var endPage;

 // 如果当前"页号"所在页的“首页”+9不超过总页数lps.count，则当前页有10个页号

 // 否则总页数lps.count就是当前页的最后一个“页号”

     if((startPage+9)<=lps.count){

     endPage = startPage+10;

     }else{

     endPage=lps.count+1;

     }

     // 根据当前“页号”所在页的“首页”和“尾页”生成页码

     for(var i=startPage;i<endPage;i++ ){

     var temp;

     if(i==lps.pageNo){

    // 当前页码有样式class='hover'

     temp = $("<a href='javascript:' class='hover' οnclick='triggerCon({pageNo:"+i+"})' id='pageNo"+i+"'>"+i+"</a>");

     }else{

     temp = $("<a href='javascript:' οnclick='triggerCon({pageNo:"+i+"})' id='pageNo"+i+"'>"+i+"</a>");

     } 

    divBegin.append(temp);

     }

 // 同理判断当前"页号"是不是和“总页数”在同一个页面，如果是“后10页”按钮不起作用

     if(indexPage== Math.floor((lps.count-1)/10)){

     nextPage= $("<a href='javascript:' class='cur'>前10页</a>");

     }else{

     nextPage= $("<a href='javascript:' οnclick='triggerCon({pageNo:"+(lps.pageNo+10)+"})' class='cur'>前10页</a>");

     }

     divBegin.append(nextPage);

     // 将页码添加

     $("#kcyl_rbox").append(divBegin);

}

转载于:https://my.oschina.net/u/554240/blog/261280