最近写了一个js分页的方法,尽管已经有现成的可以用,但还是想自己写写,搞搞清楚。最终实现的效果是:上一页、第一页、…(上n个页码)、n个页码、…(下n个页码)、最后一页、下一页。n可以是奇数也可以是偶数,一般都喜欢取奇数,星石调用的时候传入的参数是5。写的时候,主要注意了以下几个地方:
页码等于1时,只显示上一页、第一页、最后一页,且都没有跳转;
页码小于等于2时,不需要中间的n个页码;
页码小于等于n时,显示所有页码,不显示2个“…”;
2个“…”换页时,换n个页码,如果接近最前面或最后面几页了,则显示最前面或最后面n个页码。
下面贴出代码,供大家探讨:
//总页数,当前页数,跳转地址,第一页和最后一页之间显示的页码数量 function pageBar(tp,cp,url,pn){ var str = ‘<ul class=”page”>'; if(tp>1 && cp>1){ var prev = cp-1; str += ‘<li><a class=”prev” title=”上一页” href=”javascript:goPage(‘+prev+‘,\”+url+‘\');”><span>上一页</span></a></li> ‘; }else{ str += ‘<li><a class=”prev” title=”上一页” href=”javascript:void(0);”><span>上一页</span></a></li> ‘; } if(tp>1){ //第一页 if(cp==1){ str +=‘<li class=”current”><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘; }else{ str +=‘<li><a href=”javascript:goPage(1,\”+url+‘\');”><span>1</span></a></li> ‘; } if(tp>2){ var pnh = Math.floor(pn/2); //循环开始页码 var s = cp-pnh; if(s<=1){ s = 2; } //循环结束页码 var e = cp+pnh; if(e>=tp){ e = tp-1; } if(s<=(1+pnh)){ if(tp>(pn+2)){ e = s+(pn-1); if(e>=tp){ e = tp-1; } }else{ s = 2; } } if(e>=(tp-pnh)){ if(tp>(pn+2)){ s = e-(pn-1); if(s<=1){ s = 2; } }else{ e = tp-1; } } if(e<s){ e = s; } //第一页后的多页跳转 if(s>2){ var sp = cp-pn; if(sp<1){ sp=1; } str += ‘<li><a name=”break” href=”javascript:goPage(‘+sp+‘,\”+url+‘\');”><span>…</span></a></li> ‘; } for(var i=s;i<=e;i++){ if(i==cp){ str += ‘<li class=”current”><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘; }else{ str += ‘<li><a href=”javascript:goPage(‘+i+‘,\”+url+‘\');”><span>'+i+‘</span></a></li> ‘; } } //最后一页前的多页跳转 if(e < (tp-1)){ var ep = cp+pn; if(ep>tp){ ep=tp; } str += ‘<li><a name=”break” href=”javascript:goPage(‘+ep+‘,\”+url+‘\');”><span>…</span></a></li> ‘; } } //最后一页 if(cp==tp){ str +=‘<li class=”current”><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘; }else{ str +=‘<li><a href=”javascript:goPage(‘+tp+‘,\”+url+‘\');”><span>'+tp+‘</span></a></li> ‘; } }else{ str +=‘ <li class=”current”><a href=”javascript:void(0);”><span>1</span></a></li> ‘; } if(tp>1 && cp<tp){ var next = cp+1; str += ‘<li><a class=”next” title=”下一页” href=”javascript:goPage(‘+next+‘,\”+url+‘\');”><span>下一页</span></a></li>'; }else{ str += ‘<li><a class=”next” title=”下一页” href=”javascript:void(0);”><span>下一页</span></a></li>'; } str += ‘</ul>'; return str; } //跳转页码,跳转地址 function goPage(cp,url){ window.location.href = url+cp; }
以上所述就是本文的全部内容了,希望大家能够喜欢。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 张芸京.2016-失败的高歌【泡耳音乐】【WAV+CUE】
- 天籁女声《2024第31届上海国际高端音影展纪念CD》[WAV+CUE][1.1G]
- 姚斯婷 《敢爱敢做》头版限量编号24K金碟[低速原抓WAV+CUE][1.2G]
- 雷婷 《把爱留在昨天》紫银合金AQCD[低速原抓WAV+CUE][1.1G]
- 董文华2024-《精选30年·长城长HQ》头版限量[WAV+CUE]
- 柏菲·魏松2024-《跟你走》限量开盘母带ORMCD[WAV+CUE]
- 柏菲·甘雅丹《雅鲁藏布》限量开盘母带ORMCD[WAV+CUE]
- 孙露《明天你是否依然爱我》1:1母盘直刻[低速原抓WAV+CUE][1G]
- 群星2024《龙年精选.音乐盛宴》纯银CD[WAV+CUE][1.1G]
- 童丽《君再来VI》妙音首版[WAV+CUE][1G]
- 柏菲·李跃君2024-《寂寞公路》限量开盘母带ORMCD[WAV+CUE]
- 柏菲·古璇2024-《东山飘雨西山晴》限量开盘母带ORMCD[WAV+CUE]
- 群星《2024好听新歌38》AI调整音效【WAV分轨】
- 台湾荷东《周末狂热1》[WAV+CUE][1.1G]
- 群星《Hi.Fi.怀旧金曲.Vol.1》[低速原抓WAV+分轨][996M]