从零开始做一个pagination分页组件


Posted in Javascript onMarch 15, 2017

开始一个组件,毫无目的的写代码是一个不好的习惯,要经历 分析 => 抽象 => 实现 => 应用 四个阶段。

组件DEMO地址:https://github.com/CaptainLiao/zujian/tree/master/pagination

分析需求

当前页码显示前后三页,以及在两端显示上一页、下一页

未显示的地方用 ‘...'代替

举个栗子:

假设总共有30页

当前为第一页:1 2 3 4 ... 30 下一页

当前为第二页:上一页 1 2 3 4 5 ... 30 下一页

当前为第三页:上一页 1 2 3 4 5 6 ... 30 下一页
.

当前为第6页:上一页 1 ... 3 4 5 6 7 8 9 ... 30 下一页
.

当前为第29页:上一页 1 ... 26 27 28 29 30 下一页

当前为第30页:上一页 1 ... 27 28 29 30

抽象

分析上面的例子,发现决定输出的因素有两个:当前页码和总页数。

于是,我们设定一个函数用来表示当前页码的显示内容:

/**
 * @param {Number} page 当前页
 * @param {Number} totalPage 总页数 
 */
function pagination(page, totalPage) {
  var str = '';
  // todo...

  return str;
}

// 运行函数,打印出值

var ret = pagination(4, 30)

console.log(ret)

>上一页 1 2 3 4 5 6 7 ... 30 下一页

实现

输入和输出都有了,接着正式开始撸:

function pagination(page, totalPage) {
  var str = page;
  // 这里实现当前页面显示前后三项功能
  for(var i=1; i< totalPage; i++) {
    if(page-i>1) {
      str = page-i +' '+ str;
    }
    if(page + i < totalPage) {
      str = str + ' ' + (page+i)
    }
  }

  // 以page为中心,向左右扩展

  // 向左,先判断当前page向左的第四个数是否大于 1
  if(page-4 > 1) {
    str = '... ' + page;
  }
  // 继续向左判断
  if(page >1) {
    str = "上一页" + '... ' +1 +' ' +str;
  }
  // 向右,判断当前page向右的第四个数字是否小于 totalPage
  if(page + 4 < totalPage) {
    str = '... '+ str;
  }
  if(page < totalPage) {
    str = str +' ' + totalPage +' '+ '下一页';
  }
  return str;
}

现在,我们可以执行下面的函数,取得我们想要的结果:

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

至此,我们已经实现了分页的逻辑。

应用

接下来的应用就非常简单了,不外乎是给str 加一些标签和class,于是我们就得到了一个分页组件:

HTML:

<ul id="pagination-list" class="clearfix2">

</ul>

javascript:

function pagination(page, totalPage) {
    var str = '<li class="page-active">'+page+'</li>';
    for(var i=1; i<=3; i++) {
      if(page - i > 1) {
        str = '<li class="page-item">'+(page-i)+'</li>' +' '+ str;
      }
      if(page + i < totalPage) {
        str = str +" "+'<li class="page-item">'+(page+ i)+'</li>'
      }
    }
    if(page-4 >1) {
      str = '<li class="page-item">... </li>' +str;
    }
    if (page >1) {
      str= '<li class="page-up">上一页</li>'+ ' '+'<li class="page-item">1</li>' +' '+ str;
    }

    if(page+4< totalPage) {
      str = str+ '<li class="page-item"> ...</li>';
    }
    if(page < totalPage) {
      str = str + " " +'<li class="page-item">'+totalPage+'</li>' +" " +'<li class="page-down">下一页</li>'
    }
    return str;
  }
  var totalPage = 30;

  var str = pagination(1, totalPage);
  var wrap = $("#pagination-list");
  // 这里引用了 jQuery
  wrap.html(str)
    .on('click', '.page-item', function () {
      var cur = parseInt($(this).text());
      wrap.html(pagination(cur, totalPage));
    });

看看效果吧:

从零开始做一个pagination分页组件

目前来说,进展顺利,但是!还有很多需要优化的地方:样式固定,不能自由更改;初始化和交互混杂在一起,没有对代码进行封装...

又经过一番折腾,这个分页组件终于完成,下载demo:

https://github.com/CaptainLiao/zujian/tree/master/pagination

现在,我们可以这样调用它:

<script>
  // #pagination-list 是组件的父容器,50 是总页数。
  $(function () {
    $("#pagination-list").pagination(50);
  })
</script>

是不是很酸爽呢?

如果继续扩展,我们还可以给组件更多的样式选择......

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 #Javascript
javascript图片预览和上传(兼容IE)
Mar 15 #Javascript
轻松理解JavaScript之AJAX
Mar 15 #Javascript
jQuery插件ContextMenu自定义图标
Mar 15 #Javascript
JavaScript对象引用与赋值实例详解
Mar 15 #Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 #Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 #Javascript
You might like
php预定义常量
2006/12/25 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
使用PHP实现Mysql读写分离
2013/06/28 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
PHP实现的各种中文编码转换类分享
2015/01/23 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序云开发(数据库)详解
2019/05/17 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python判断字符串与大小写转换
2015/06/08 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python 检查文件mime类型的方法
2018/12/08 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
基于python检查矩阵计算结果
2020/05/21 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
农村婚礼主持词
2014/03/13 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
科技节口号
2014/06/19 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
工伤事故证明
2014/10/20 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python