从零开始做一个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选择器之基本选择器、层次选择器
Feb 07 Javascript
自己做的模拟模态对话框实现代码
May 23 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JS实现页面超时后自动跳转到登陆页面
Jan 19 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
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 缓冲的免费实现方法
2006/10/09 PHP
PHP4之COOKIE支持详解
2006/10/09 PHP
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
Python网络编程详解
2017/10/31 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python模块smtplib学习
2018/05/22 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python变量访问权限控制详解
2019/06/29 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
酒店总经理助理岗位职责
2014/02/01 职场文书
优秀广告词大全
2014/03/19 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
出差报告格式模板
2014/11/06 职场文书
小学思品教学反思
2016/02/20 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
python小型的音频操作库mp3Play
2022/04/24 Python