简单的分页

Flands 发布于2019-08-21 11:26 / 1651人阅读

摘要：哦，我想起来了，我们忘记添加第一页跟最后一页了首先记录传入的页码数字判断所传页码之前添加的页码数判断所传页码之后添加的页码数判断页码左边是否添加上一页下一页咦，看上去好了。那我们来一个简单粗暴的吧

原文链接

编程，很重要的一个技能就是抽象能力，就是现实中的琐事，我怎么用代码来表示。

一、简单的分页需求

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

未显示的页码用省略号"..."表示

举例如下：

当前页码为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 ... 106 107 108 109 110

二、思路分析

不考虑超链接，我们可以将需求抽象出来。可以将这个需求简单成一个字符输出问题

要求：

输入两个参数，当前页数page以及总页数total

输出符合上述要求的字符串

可以考虑先定义一个函数showPage

function showPage(page, total){

}

过程：

首先，我们来解决最普遍的需求：页数左右各添加3个页码

function showPage(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);
    }
  }
}

再来解决左边是否添加...

function showPage(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 - 3 > 1){ //判断页码左边是否添加"..."
    str = "... " + str;
  }

  if(page + 3 < total){
    str = str + "... ";
  }

  return str;
}

好像遗漏了什么。。。哦，我想起来了，我们忘记添加第一页跟最后一页了！

function showPage(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 - 3 > 1){ //判断页码左边是否添加"..."
    str = "... " + str;
  }

  if(page > 1) {
    str = "上一页 " + "1 " + str;
  }

  if(page + 3 < total){
    str = str + "...";
  }

  if(page < total){
    str = str + " " + total + " 下一页";
  }

  return str;
}

咦，看上去好了。但总感觉缺点什么~~~

三、测试用例

哦，想起来了，我们忘记写测试用例了。那我们来一个简单粗暴的吧~

var total = 110;
for(var i = 1; i <= total; i++){
  var ret = showPage(i, total);
  console.log(ret);
}

云服务器 GPU云服务器 html的分页 jstl的分页存储过程的分页 js的分页代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86710.html

基于游标的分页接口实现

摘要：游标条数的分页接口实现命令用于迭代数据库中所有的，但是因为数据中的数量是不能确定的，线上直接执行会被打死的，而且的数量在你操作的过程中也是时刻在变化的，可能有的被删除，可能期间又有新增的。分页接口的实现，在偏业务的服务端开发中应该很常见，PC时代的各种表格，移动时代的各种feed流、timeline。出于对流量的控制，或者用户的体验，大批量的数据都不会直接返回给客户端，而是通过...

godruoyi 2019-08-23 13:06 评论0 收藏0
jq easyui数据网络的分页过程

摘要：在涉及到组件的分页功能时，遇到了一点问题。由于数据较多，这边不予展示。返回的数据必须是符合要求的数据，格式如下必须带有属性，属性值为总共的数据条数，是这一页的数据内容，以数组对象的形式返回。第一次写技术方面的文章，有点忐忑，总怕自己讲的不对误导别人。但是万事总有个开头，有不足错误之处，请各位读者老爷指出。言归正传，最近刚进新公司，上头要求我先熟悉熟悉easyui这个组件库。在涉及到...

Rainie 2019-08-21 10:53 评论0 收藏0
jq easyui数据网络的分页过程

摘要：在涉及到组件的分页功能时，遇到了一点问题。由于数据较多，这边不予展示。返回的数据必须是符合要求的数据，格式如下必须带有属性，属性值为总共的数据条数，是这一页的数据内容，以数组对象的形式返回。第一次写技术方面的文章，有点忐忑，总怕自己讲的不对误导别人。但是万事总有个开头，有不足错误之处，请各位读者老爷指出。言归正传，最近刚进新公司，上头要求我先熟悉熟悉easyui这个组件库。在涉及到...

array_huang 2019-08-01 15:21 评论0 收藏0
懒加载实现的分页&&网站footer自适应

摘要：最近在做手机端，发现下拉刷新和上拉加载的控件很少而且自我感觉不好用，比如之类然后自己写了个懒加载的，也很简单，最基础的代码不喜勿喷，但蛮实用的手机端懒加载分页用之前先引用下这里的表示距离底部像素触发，可自行调节第页这里放你的分页代码这是刷最近在做手机端，发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用，比如iscroll之类…… 然后自己写了个懒加载的，也很简单，最基础的代码【...

neu 2019-08-20 13:45 评论0 收藏0
懒加载实现的分页&&网站footer自适应

摘要：最近在做手机端，发现下拉刷新和上拉加载的控件很少而且自我感觉不好用，比如之类然后自己写了个懒加载的，也很简单，最基础的代码不喜勿喷，但蛮实用的手机端懒加载分页用之前先引用下这里的表示距离底部像素触发，可自行调节第页这里放你的分页代码这是刷最近在做手机端，发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用，比如iscroll之类…… 然后自己写了个懒加载的，也很简单，最基础的代码【...

tigerZH 2019-08-01 16:12 评论0 收藏0