从零开始做一个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继承的实现
Oct 24 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js获取内联样式的方法
Jan 27 Javascript
javascript 实现map集合
Apr 03 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 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查询网站的PR值
2013/10/30 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
php实现文件下载功能的几个代码分享
2014/05/10 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
利用JS判断鼠标移入元素的方向
2016/12/11 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
js中的数组对象排序分析
2018/12/11 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python类的基础入门知识
2008/11/24 Python
解决python删除文件的权限错误问题
2018/04/24 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python 实现提取log文件中的关键句子,并进行统计分析
2019/12/24 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
旅游管理实习自我鉴定
2013/09/29 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang