本文详细解析如何使用原生JavaScript实现一个功能完整的列表分页导航组件。通过自定义pageBar函数，动态处理总页数与当前页数的关系，智能生成包含上一页、下一页、固定首尾页及中间省略号（...）和可变数量页码的分页条。代码涵盖边界条件判断与URL跳转逻辑，适用于无需第三方库的轻量级前端开发场景。
JavaScript分页逻辑概述
近期开发了一个基于JavaScript的分页方法。虽然市面上已有现成的解决方案，但为了深入理解其内部机制，决定自行编写实现。最终达成的效果是：分页条包含“上一页”、“第一页”、“...”（代表上n个页码）、具体的n个页码、“...”（代表下n个页码）、“最后一页”以及“下一页”。参数n可以是奇数或偶数，通常习惯取奇数，例如本例中调用时传入的参数为5。在编写过程中，重点注意并处理了以下几个关键逻辑点：
边界条件与页码显示规则
当页码等于1时，仅显示“上一页”、“第一页”和“最后一页”，且这些链接均不具备跳转功能； 当页码小于等于2时，中间区域不需要显示那n个页码； 当页码小于等于n时，直接显示所有页码，不显示两个“...”省略号； 当两个“...”发生换页变化时，需同步更新那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;
}
总结
上述内容即为本文的全部介绍，希望读者能够喜欢。