【问题标题】:Javascript Generating pagination numbersJavascript生成分页数
【发布时间】:2015-05-21 03:32:42
【问题描述】:

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

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

  • 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);

【问题讨论】:

    标签: javascript pagination


    【解决方案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;
    }
    

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

    【讨论】:

      【解决方案2】:

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

      您可以在检查 if (current > (count - (shownPageNumbers - 1)) 的 for 循环之前添加 if 语句并将 current 更新为该语句,或者在您的 for 循环中设置 i = min(current, (count - (shownPageNumbers - 1))

      【讨论】:

      • 我意识到了这个问题,我在问这个问题有什么好的解决方案。
      • 哦,对不起。您可以在检查 if (current &gt; (count - (shownPageNumbers - 1)) 的 for 循环之前添加一个 if 语句并将当前更新到该语句,或者在您的 for 循环集 i = min(current, (count - (shownPageNumbers - 1))
      • 您能否将其添加到答案中。
      猜你喜欢
      • 2012-09-19
      • 1970-01-01
      • 2017-06-24
      • 2011-02-01
      • 2012-07-27
      • 1970-01-01
      相关资源
      最近更新 更多