【前端问题精选】js数字分页

我要做一个数字分页的效果,如图图片描述

图片描述

图片描述

图片描述

这是我目前的代码,用了最笨的方法:分情况讨论

    public Lists:any = [];

defaultPage() {

this.updatePageList();

this.Lists.startLists = [];//这个是'...'左边的数组[1,2,3]或者[1,2]

this.Lists.endLists = [];//这是最右边的[11,12]

this.Lists.midLists = [];//这是中间显示的数组

if (this.pageCount < 7) {

this.Lists.spanStatus = [false, false];//这个是`...`的状态,false就不显示

for (let i = 0; i < this.pageCount; i++) {//pageCount是总页码,currentPageNum是当前页码

this.Lists.startLists.push(i + 1);

}

} else if (this.pageCount >= 7) {

this.Lists.spanStatus = [true, false];

for (let i = 0; i < 3; i++) {

this.Lists.startLists.push(i + 1);

}

for (let j = this.pageCount - 3; j < this.pageCount; j++) {

this.Lists.endLists.push(j + 1);

}

}

//页码

let midEndNumber;

if (this.currentPageNum == 3 ) {

midEndNumber = this.pageCount >= 4 ? 4 : this.pageCount;

this.Lists.midLists = [midEndNumber];

this.Lists.spanStatus[0] = false;

if(this.pageCount>=7){

this.Lists.spanStatus[1]=true;

this.Lists.endLists=[this.pageCount-1,this.pageCount];

}else{

this.Lists.spanStatus[1]=false;

}

}

if (this.currentPageNum > 3 && this.currentPageNum < 5) {

midEndNumber = this.pageCount >= this.currentPageNum + 2 ? this.currentPageNum + 2 : this.pageCount;

for (let i = 4; i < midEndNumber; i++) {

this.Lists.midLists.push(i);

this.Lists.spanStatus[0] = false;

}

if(this.pageCount>=7){

this.Lists.spanStatus[1]=true;

this.Lists.endLists=[this.pageCount-1,this.pageCount];

}else{

this.Lists.spanStatus[1]=false;

}

}

if (this.currentPageNum >= 5) {

midEndNumber = this.pageCount >= this.currentPageNum + 2 ? this.currentPageNum + 2 : this.pageCount;

for (let i = this.currentPageNum - 1; i < midEndNumber; i++) {

this.Lists.midLists.push(i);

}

this.Lists.spanStatus[0] = true;

this.Lists.startLists=[1,2];

if(this.pageCount>=7){

this.Lists.spanStatus[1]=true;

this.Lists.endLists=[this.pageCount-1,this.pageCount];

}else{

this.Lists.spanStatus[1]=false;

}

}

return this.Lists;

}

我觉得这个方法太笨了,写不下去了,求大神求简便算法

回答:

从当前页码出发思考。

  1. ... 与当前页码的前后距离永远是 2

  2. 前2个页码(1、2)与最后2个页码(图中是11、12,实际需要从length计算)是永远不会变成 ...

  3. ... 省略的数值是可以根据当前页码算出来的,前是:2 到 cur - 1,后是 cur+1 到 length -2 。如果之间的距离为 0,那就是没有省略号。

补充:

忘了考虑当前页面位于前2后2时的情况了。

此时计算省略的数值范围变成 cur+1 到 length -3 3 到 cur - 1,也就是前后不变码变成3个。

以上是 【前端问题精选】js数字分页 的全部内容, 来源链接: utcz.com/a/132533.html

回到顶部