从零开始做一个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中void(0)的具体含义解释
Aug 02 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
ajax中get和post的说明及使用与区别
Dec 23 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
JavaScript正则表达式简单实用实例
Jun 23 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
vue实现简单学生信息管理
May 30 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
php 常用字符串函数总结
2008/03/15 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
PHP函数microtime()用法与说明
2013/12/04 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
利用JS如何获取form表单数据
2019/12/19 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
Python素数检测的方法
2015/05/11 Python
python中list常用操作实例详解
2015/06/03 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python 实现return返回多个值
2019/11/19 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
Python 数据分析之逐块读取文本的实现
2020/12/14 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
党员批评与自我批评材料
2014/10/14 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
初三毕业感言
2015/07/31 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
Go获取两个时区的时间差
2022/04/20 Golang