如何写一个简单的分页
好基友现在也是个前端，昨天他问我说：
公司的大部分任务都能应付着做了，
现在要做个分页，如果用插件的话，很快就能上，
但是我想提升一下自己，怎么从头开始写一个呢，实在是一点思路也没有。
我想，很多自学前端的同学都会遇到这样一个坎儿，我能做很多东西，但是感觉自己还是啥都不会。
编程，很重要的一个技能就是抽象能力，就是现实中的琐事儿，我怎么用代码来表示。（是表示哈，不是人工智能）
我特别崇拜 ACM 的获奖者，我们公司的死月大大就曾经是 ACM 全国一等奖哦，快过来膜拜。
ACM 是做一些 c 语言算法题，但是你从中可以看到，那些题目都是从生活的例子出发，然后就得到了这样一个用 c 语言可以编程的题。
现在回归那个分页。
我们先看一下简单的需求。
当前页码前后显示 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
那么你可能就看出来了，虽然每一页在实际应用中都是一个超链接，但是我们在思考算法时可以先将其忽略。
现在就变成了一个简单的字符串输出题。
我们先定义一个函数
function showPages (page, total) { } 盲目的就开始码代码一定是个不好的习惯，码代码之前，我们要先准备好覆盖所有情况的测试。
这个题就简单咯，我们可以把所有结果都打印出来呗。
在无需引入一个代码测试库的情况下，我们来这么干
var total = 110; for (var i = 1; i <= total; i++) { var ret = showPages(i, total); console.log(ret); } 就从页码为 1 到最后一页的结果全输出出来了。
我之所以崇拜 AMD 大神，是因为我算法能力其实一般般，所以献丑贴代码一定不要笑话我哦，咱说好，本文讲的是解决问题的思维模式。
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>'; 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 打印出来就是一个红色主题的分页，和一个蓝色主题的分页。
括弧笑。
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](http://www.liuhaihua.cn/img/qrcode_gzh.jpg)
