写分页器的时候引用别人的js总是不能达到自己想要的效果，在这里记录下自制分页器的历程
html部分
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8" /><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<style>#pager{padding: 0;float: left;margin:10px;width: 400px;height: 30px;}#pager li{width: 30px;height: 30px;line-height: 30px;margin: 0 3px 0 3px;text-align: center;vertical-align: top;display: inline-block;list-style: none;border-radius: 4px;cursor: default;}.pagerBtn{color: #333;background: white;border: 1px solid #DADADA;}.pagerBtn:hover{background:rgb(201, 201, 255);}.pagerChoosed{color: #FFF;background: deepskyblue;border: 1px solid #00B9CC;}.pagerOmit{color: #333;background: #F9F9F9;border: 1px solid #DADADA;}
</style><body><ul id="pager" total="" size=""></ul>
</body>
</html>
javascript部分
首先以生成长度为9个li的分页器为例。假设有100页，要达到的效果如下：
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | … | 100 |
|---|
| 1 | … | 4 | 5 | 6 | 7 | 8 | … | 100 |
|---|
| 1 | … | 94 | 95 | 96 | 97 | 98 | 99 | 100 |
|---|
function setPager(page,total,size){//page 当前选中的页号//total 列表长度//size 每页多少行$("#pager").html('').attr('total',total).attr('size',size);var cursor=1;//游标，在循环结尾它等于几就会生成一个跳转到第几页的livar index=0;//由于游标会发生改变，index可以清楚记录生成了几个livar pi=page-2;//在长度为9时，中间有五个可选，pi是中间最左侧var li=Math.ceil(total/size)+1;//需要生成的li的个数+1// pi page li-1// 1 ... 3 4 5 6 7 ... 100for(;cursor<li;cursor++,index++){/*判断生成左侧省略号li>10 : 只需要生成9个及以下个li时不需要生成左侧省略号page>=6 : 为了让选中的页号显示在正中间，左侧和右侧应该都有4个，选中的页号恰好等于6时，左侧就有5个，此时需要生成省略号pi>=4 : 在符合前两个判断的情况下，如果pi等于3那就只有2被省略，这样单省略一个2就没有意义，至少省略23，所以左侧省略至少是pi>=4cursor==2 : 在生成完第一个li之后第二个位置需要生成省略号*/if(li>10&&page>=6&&pi>=4&&cursor==2){Omit();//生成一个省略号cursor=pi>(li-7)?(li-7):pi;//生成完左侧省略号之后还剩7个按钮没有生成。倒数第七个和pi哪个小接下来就生成哪个}/*判断生成右侧省略号cursor>7 : 即使没有生成左侧省略号那cursor>7时至少生成了7个，所以cursor<8时不可能需要生成右侧省略号index>5 : 当前第八个位置需要生成右侧省略号li-cursor>2 : 在符合前两个判断的情况下，如果至少还剩三个（两个要省略和最后一个）就生成省略号*/if(cursor>7&&index>5&&li-cursor>2){Omit();//生成一个省略号cursor=li-1;//把游标移到最后一个位置生成最后一个循环结束}let o=cursor==page?'':'οnclick="cutoverPage('+cursor+')"';//按钮点击事件//这里生成有数字的分页器按钮，前面两个判断只是用来生成省略号$("#pager").append('<li '+o+' class="pager'+(cursor==page?"Choosed":"Btn")+'">'+cursor+'</li>');}function Omit(){$("#pager").append('<li class="pagerOmit">...</li>');}
}
function cutoverPage(page){console.log('点击了第'+page+'页');var total=$("#pager").attr('total');var size=$("#pager").attr('size');setPager(page,total,size);
}
效果如下
固定9个不能总是满足需要，所以再加一个参数来控制宽度
var w=13;
setPager(2,1000,10,w);
function setPager(page,total,size,len){//page 当前选中的页号//total 列表长度//size 每页多少行//len 控制生成的分页器长度，最好是单数并且不能小于7if(len<7) return;//总长小于7时没法生成//每个li加上边框和margin一共是38$("#pager").width(len*38).html('').attr('total',total).attr('size',size);var llen=Math.floor((len+1)/2-3);var flen=len-2;var cursor=1;//游标，在循环结尾它等于几就会生成一个跳转到第几页的livar index=0;//由于游标会发生改变，index可以清楚记录生成了几个livar pi=page-llen;//在长度为9时，中间有五个可选，pi是中间最左侧var li=Math.ceil(total/size)+1;//需要生成的li的个数+1// pi page li-1// 1 ... 3 4 5 6 7 ... 100for(;cursor<li;cursor++,index++){/*判断生成左侧省略号li>10 : 只需要生成9个及以下个li时不需要生成左侧省略号page>=6 : 为了让选中的页号显示在正中间，左侧和右侧应该都有4个，选中的页号恰好等于6时，左侧就有5个，此时需要生成省略号pi>=4 : 在符合前两个判断的情况下，如果pi等于3那就只有2被省略，这样单省略一个2就没有意义，至少省略23，所以是pi>=4cursor==2 : 在生成完第一个li之后第二个位置需要生成省略号*/if(li>(len+1)&&page>=(pi+llen)&&pi>=4&&cursor==2){Omit();//生成一个省略号cursor=pi>(li-flen)?(li-flen):pi;//生成完左侧省略号之后还剩7个按钮没有生成。倒数第七个和pi哪个小接下来就生成哪个}/*判断生成右侧省略号cursor>7 : 即使没有生成左侧省略号那cursor>7时至少生成了7个，所以cursor<8时不可能需要生成右侧省略号index>5 : 当前第八个位置需要生成右侧省略号li-cursor>2 : 在符合前两个判断的情况下，如果至少还剩三个（两个要省略和最后一个）就生成省略号*/if(cursor>flen&&index>(flen-2)&&li-cursor>2){Omit();//生成一个省略号cursor=li-1;//把游标移到最后一个位置生成最后一个循环结束}let o=cursor==page?'':'οnclick="cutoverPage('+cursor+')"';//按钮点击事件//这里生成有数字的分页器按钮，前面两个判断只是用来生成省略号$("#pager").append('<li '+o+' class="pager'+(cursor==page?"Choosed":"Btn")+'">'+cursor+'</li>');}function Omit(){$("#pager").append('<li class="pagerOmit">...</li>');}
}
function cutoverPage(page){console.log('跳转到第'+page+'页');var total=$("#pager").attr('total');var size=$("#pager").attr('size');setPager(page,total,size,w);
}
稍作简化：
function setPager(p,t,s,l){if(l<7) return;$("#pager").width(l*38).html('').attr('total',t).attr('size',s);for(let ll=Math.floor((l+1)/2-3),fl=l-2,c=1,i=0,pi=p-ll,li=Math.ceil(t/s)+1;c<li;c++,i++){if(li>(l+1)&&p>=(pi+ll)&&pi>=4&&c==2) Omit(),c=pi>(li-fl)?(li-fl):pi;if(c>fl&&i>(fl-2)&&li-c>2) Omit(),c=li-1;let o=c==p?'':'οnclick="cutoverPage('+c+')"';$("#pager").append('<li '+o+' class="pager'+(c==p?"Choosed":"Btn")+'">'+c+'</li>');}function Omit(){$("#pager").append('<li class="pagerOmit">...</li>');}
}
造轮子+1
