从零开始做一个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 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
Bootstrap精简教程
Nov 27 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
Mar 22 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Vue的props父传子的示例代码
May 20 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中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
js操作二进制数据方法
2018/03/03 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
Nautil 中使用双向数据绑定的实现
2019/10/02 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python数据存储之 h5py详解
2019/12/26 Python
python ftplib模块使用代码实例
2019/12/31 Python
Python list运算操作代码实例解析
2020/01/20 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
美国牛仔品牌:True Religion
2018/11/16 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
计算机应用职专应届生求职信
2013/11/12 职场文书
电子商务自荐书范文
2014/01/04 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
党员教师四风自我剖析材料
2014/09/30 职场文书
高三毕业评语
2014/12/31 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL