神刀安全网

如何写一个简单的分页

好基友现在也是个前端,昨天他问我说:

公司的大部分任务都能应付着做了,

现在要做个分页,如果用插件的话,很快就能上,

但是我想提升一下自己,怎么从头开始写一个呢,实在是一点思路也没有。

我想,很多自学前端的同学都会遇到这样一个坎儿,我能做很多东西,但是感觉自己还是啥都不会。

编程,很重要的一个技能就是抽象能力,就是现实中的琐事儿,我怎么用代码来表示。(是表示哈,不是人工智能)

我特别崇拜 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 打印出来就是一个红色主题的分页,和一个蓝色主题的分页。

括弧笑。

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 如何写一个简单的分页

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮