从零开始做一个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 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
vue双向数据绑定原理探究(附demo)
Jan 17 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
layui表格数据重载
Jul 27 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JS获取父节点方法
2009/08/20 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
VUE动态生成word的实现
2020/07/26 Javascript
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
Django如何使用redis作为缓存
2020/05/21 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
食品营养与检测应届生求职信
2013/11/08 职场文书
就业协议书怎么填
2014/04/11 职场文书
感恩的演讲稿
2014/05/06 职场文书
企业晚会策划方案
2014/05/29 职场文书
旅游文化节策划方案
2014/06/06 职场文书
ktv好的活动方案
2014/08/15 职场文书
护理医院见习报告
2014/11/03 职场文书
三峡人家导游词
2015/01/31 职场文书