从零开始做一个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的图片左右无缝滚动插件
May 23 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
javascript的document中的动态添加标签实现方法
Oct 24 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
TypeScript类型声明书写详解
Aug 28 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
php4的彩蛋
2006/10/09 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
百度留言本js 大家可以参考下
2009/10/13 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
javascript变量声明实例分析
2015/04/25 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
javascript设计模式之迭代器模式
2020/01/30 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python采集博客中上传的QQ截图文件
2014/07/18 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
.NET里面什么时候需要调用垃圾回收
2015/06/01 面试题
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
长辈证婚人证婚词
2014/01/09 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
商家认证委托书格式
2014/10/16 职场文书
工作失职检讨书
2015/01/26 职场文书
公司年会开场白
2015/06/01 职场文书
2016年清明节寄语
2015/12/04 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
Vue中插槽slot的使用方法与应用场景详析
2021/06/08 Vue.js