从零开始做一个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 相关文章推荐
Javascript计算时间差的函数分享
Jul 04 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
JS自定义选项卡函数及用法实例分析
Sep 02 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
Vue formData实现图片上传
Aug 20 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
详解node和ES6的模块导出与导入
Feb 19 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 header示例代码(推荐)
2010/09/08 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP6新特性分析
2016/03/03 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
js实现表格字段排序
2014/02/19 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
js实现jquery的offset()方法实例
2015/01/10 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
jQuery下拉框的简单应用
2016/06/24 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
Vue 进入/离开动画效果
2017/12/26 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
python根据日期返回星期几的方法
2015/07/06 Python
判断网页编码的方法python版
2016/08/12 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python出现&quot;IndentationError: unexpected indent&quot;错误解决办法
2017/10/15 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
洲际酒店集团大中华区:IHG中国
2016/08/17 全球购物
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
世界读书日的活动方案
2014/08/20 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python