如何写一个简单的分页

我们先看一下简单的需求。

当前页码前后显示 3 页，然后需要显示第一页和最后一页

未显示的页码用省略号表示。

举例：如果总共 110 页

当前页码为 1，那么显示 1 2 3 4 ... 110 下一页

当前页码为 2，那么显示 上一页 1 2 3 4 5 ... 110 下一页

当前页码为 3，那么显示 上一页 1 2 3 4 5 6 ... 110 下一页

当前页码为 4，那么显示 上一页 1 2 3 4 5 6 7 ... 110 下一页

当前页码为 5，那么显示 上一页 1 2 3 4 5 6 7 8 ... 110 下一页

当前页码为 6，那么显示 上一页 1 ... 3 4 5 6 7 8 9 ... 110 下一页

…

当前页码为 100，那么显示 上一页 1 ... 97 98 99 100 101 102 103 ... 110 下一页

…

当前页码为 109，那么显示 上一页 1 ... 106 107 108 109 110 下一页

当前页码为 110，那么显示 上一页 1 ... 107 108 109 110
24000

那么你可能就看出来了，虽然每一页在实际应用中都是一个超链接，但是我们在思考算法时可以先将其忽略。

现在就变成了一个简单的字符串输出题。

我们先定义一个函数

function showPages (page, total) {

}

盲目的就开始码代码一定是个不好的习惯，码代码之前，我们要先准备好覆盖所有情况的测试。

这个题就简单咯，我们可以把所有结果都打印出来呗。

在无需引入一个代码测试库的情况下，我们来这么干

var total = 110;

for (var i = 1; i <= total; i++) {

var ret = showPages(i, total);

console.log(ret);

}

就从页码为 1 到最后一页的结果全输出出来了。

我之所以崇拜 ACM 大神，是因为我算法能力其实一般般，所以献丑贴代码一定不要笑话我哦，咱说好，本文讲的是解决问题的思维模式。

function showPages (page, total) {

var str = page + '';

for (var i = 1; i <= 3; i++) {

if (page - i > 1) {

str = page - i + '
' + str;

}

if (page + i < total) {

str = str + '
' + (page + i);

}

}

if (page - 4 > 1) {

str = '...
' + str;

}

if (page > 1) {

str = '上一页
' + 1 + '
' + str;

}

if (page + 4 < total) {

str = str + '
...';

}

if (page < total) {

str = str + '
' + total + '
下一页';

}

return str;

}

那么，作为一个算法题，可算是完成了，可是它不是一个分页啊，不能用啊。

别急，我们只需要把一些简单的 html 代码补充完整就行。

var str = '<a>' + page + '</a>';

for (var i = 1; i <= 3; i++) {

if (page - i > 1) {

str = '<a
class="page">' + (page - i) + '</a>
' + str;

}

if (page + i < total) {

str = str + '
' + (page + i);

}

}

这里仅仅举一个简单例子，class
名啊什么的，自己按需求修改修改就好了，必要的话，多套个 div 也没关系。

最后，贴一个大概是可以实现通用分页的思路。

function showPageCommon(config) {

return function (page, total) {

var str = '<a>' + page + '</a>';

&nbs
231a4
p; for (var i = 1; i <= 3; i++) {

if (page - i > 1) {

str = '<a
class="' + config.color + '">' + (page - i) + '</a>
' + str;

}

if (page + i < total) {

str = str + '
' + (page + i);

}

}

if (page - 4 > 1) {

str = '...
' + str;

}

if (page > 1) {

str = '上一页
' + 1 + '
' + str;

}

if (page + 4 < total) {

str = str + '
...';

}

if (page < total) {

str = str + '
' + total + '
下一页';

}

return str;

}

}

var showPages = showPageCommon({

color: 'red'

});

var total = 110;

for (var i = 1; i <= total; i++) {

var ret = showPages(i, total);

console.log(ret);

}

var showPages = showPageCommon({

color: 'blue'

});

var total = 110;

for (var i = 1; i <= total; i++) {

var ret = showPages(i, total);

console.log(ret);

}

输出的 html 打印出来就是一个红色主题的分页，和一个蓝色主题的分页。