Javascript 生成页码

Question

我正在尝试生成分页按钮。

我希望按钮看起来像这样：

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.

粗体数字为选中页，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);

Answer 1

您的问题是您只填充了从 current 到 count 的数组。因此，当您获得 current 的值高于 count - (shownPageNumbers - 1) 时，您需要让 for 循环从 count - (shownPageNumbers - 1) 开始，而不仅仅是 current，以便显示正确的页码数量。

您可以在 for 循环之前添加一个 if 语句来检查 if (current > (count - (shownPageNumbers - 1)) 并将 current 更新为那个，或者在您的 for 循环中设置 i = min(current, (count - （显示页数 - 1））

Answer 2

以下是我的实现方式：

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;
}

示例：http://jsfiddle.net/howderek/x474jtsd/

Javascript 生成页码

Javascript Generating pagination numbers

javascript

pagination