Javascript生成分页编号
问题描述:
我正在尝试生成分页按钮。Javascript生成分页编号
我想按钮看起来像这样:
- ,2,3 ... 7
- ,3,4 ... 7
- ,4,5 ... 7.
- ,5,6 ... 7.
- ,6,7
- 5,,7.
- 5,6,7 。
黑色数字是选定页面,7是最高页面。
我目前的功能直到你在最后3页为止。
[1, 2, 3, "...", 7]
[2, 3, 4, "...", 7]
[3, 4, 5, "...", 7]
[4, 5, 6, "...", 7]
[5, 6, 7]
[6, 7]
[7]
我希望它是什么样子:
[1, 2, 3, "...", 7]
[2, 3, 4, "...", 7]
[3, 4, 5, "...", 7]
[4, 5, 6, "...", 7]
[5, 6, 7]
[5, 6, 7]
[5, 6, 7]
的Javascript:
var test = function (count, current) {
this.pageCountArray = [];
var shownPageNumbers = 3;
for (var i = current; i <= count; i++) {
if (this.pageCountArray.length < shownPageNumbers) {
this.pageCountArray.push(i);
}
else {
this.pageCountArray.push('...');
this.pageCountArray.push(count);
break;
}
}
console.log(this.pageCountArray);
}
使用:
test(7, 1);
test(7, 2);
test(7, 3);
test(7, 4);
test(7, 5);
test(7, 6);
test(7, 7);
console.clear();
var test = function (count, current) {
this.pageCountArray = [];
var shownPageNumbers = 3;
for (var i = current; i <= count; i++) {
if (this.pageCountArray.length < shownPageNumbers) {
this.pageCountArray.push(i);
}
else {
this.pageCountArray.push('...');
this.pageCountArray.push(count);
break;
}
}
console.log(this.pageCountArray);
document.write(JSON.stringify(this.pageCountArray))
}
test(7, 1);
test(7, 2);
test(7, 3);
test(7, 4);
test(7, 5);
test(7, 6);
test(7, 7);
答
您的问题是,你是你的填充阵列只能从current
到count
。所以,当你的current
的值高于count - (shownPageNumbers - 1)
时,你需要让for循环从count - (shownPageNumbers - 1)
开始,而不是从current
开始,以显示正确的页码数量。你可以在for循环检查if(current>(count - (shownPageNumbers - 1))并更新当前值,或者在for循环中设置i = min(current,(count - ( shownPageNumbers - 1))
答
这是我将如何实现它:
function pageNumbers(count, current) {
var shownPages = 3;
var result = [];
if (current > count - shownPages) {
result.push(count - 2, count - 1, count);
} else {
result.push(current, current + 1, current + 2, '...', count);
}
return result;
}
我意识到这个问题,我问一个很好的解决这个问题是什么 – CharliePrynn
哦。 ,对不起,您可以在for循环chec之前添加if语句(当前>(count - (shownPageNumbers - 1))'并且更新当前值,或者在您的for循环中设置'i = min(current,(count - (shownPageNumbers - 1))' – AverageToaster
您可以添加请回答。 – CharliePrynn