JQuery的Pager分页器实现代码


Posted in Javascript onMay 03, 2016

本文实例为大家分享了JQuery的Pager分页器的具体实现代码,供大家参考,具体内容如下

效果图:

JQuery的Pager分页器实现代码

代码:

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>分页器</title>
 <link href="pager.css" rel="stylesheet"/>
</head>
<body>
 <div id="pager"></div>
 <script src="pager.js"></script>
 <script>
 function doChangePage(obj){
  //TO DO
 }

 var pagerBox = document.getElementById('pager');

 var pager = new Pager({
  index: 1,
  total: 15,
  parent: pagerBox,
  onchange: doChangePage
 });
 </script>
</body>
</html>

css代码:

.pager-box:after{
 display:block;
 height:0;
 visibility:hidden;
 clear:both;
 content:'';
}
.pager{
 float:left;
 position:relative;
 left:50%;
 font-family:微软雅黑;
}
.pager a,.pager span{
 position:relative;
 left:-50%;
 display:block;
 float:left;
 margin-left:5px;
 border:1px solid #b6bcc1;
 padding: 5px 10px;
 text-decoration:none;
 color:#b6bcc1;
 border-radius:3px;
}
.pager span{
 border:0;
}
.pager a.js-selected{
 background:#b6bcc1;
 color:#fff;
 cursor:default;
}
.pager a.js-disabled{
 background:#f1f1f1;
 border-color:#f1f1f1;
 cursor:default;
 color:#fff;
}

pager.js代码

(function(window, undefined){

 /**
 * 创建元素节点并返回
 */
 function create(tagName, className, parent){
 var element = document.createElement(tagName);
 element.className = className;
 parent.appendChild(element);
 return element;
 }

 /**
 * 数组消除重复
 */
 function clearRepeat(arr){
 var obj = {},
  result = [];
 for(var i = 0, len = arr.length; i < len; i++){
  obj[arr[i]] = 1;
 }
 for(var i in obj){
  result.push(i);
 }
 return result;
 }

 /**
 * 添加类名
 */
 function addClassName(element, className){
 var aClass = element.className.split(' ');
 aClass.push(className);
 aClass = clearRepeat(aClass);
 element.className = aClass.join(' ');
 }
 /**
 * 删除类名
 */
 function delClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) aClass.splice(index, 1);
 element.className = aClass.join(' ');
 }

 /**
 * 检查是否含有类名
 * @param element
 * @param className
 * @returns {boolean}
 */
 function hasClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) return true;
 return false;
 }

 var Pager = function(obj){

 this.__total = obj.total || 1;
 this.__index = obj.index || 1;
 this.__parent = obj.parent;
 this.__onchange = obj.onchange;
 //初始化分页器
 this.__init(obj);

 };

 var pro = Pager.prototype;
 /**
 * 初始化分页器
 */
 pro.__init = function(obj){
 if(this.__total < this.__index) return;
 //存储数字
 this.__numbers = [];
 //储存省略号
 this.__dots = [];
 this.__wrapper = create('div', 'pager-box', this.__parent);
 this.__body = create('div', 'pager', this.__wrapper);
 //存储上一页
 this.__preBtn = create('a', 'prev', this.__body);
 this.__preBtn.href = 'javascript:void(0);';
 this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一页';
 //存储数字
 if(this.__total < 8){
  for(var i = 0; i < this.__total; i++){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript:void(0);';
  t.innerText = i + 1;
  this.__numbers.push(t);
  }
 }else{
  for(var i = 0; i < 2; i++){
  var t = create('span', 'dots', this.__body);
  t.innerText = '...';
  this.__dots.push(t);
  };
  for(var i = 0; i < 7; i++){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript:void(0);';
  this.__numbers.push(t);
  }

 }
 //存储下一页
 this.__nextBtn = create('a', 'next', this.__body);
 this.__nextBtn.href = 'javascript:void(0);';
 this.__nextBtn.innerText = (obj.label && obj.label.next) || '下一页';
 //
 this._$setIndex(this.__index);
 //
 this.__body.onclick = this.__doClick.bind(this);
 };

 pro.__doClick = function(e){
 var e = e || window.event,
  target = e.target || e.srcElement;
 //点击省略号
 if(target.tagName.toLowerCase() == 'span') return;
 //点击了不能点击的上一页或者下一页
 if(hasClassName(target, 'js-disabled')) return;
 //点击了当前页
 if(hasClassName(target, 'js-selected')) return;

 if(target == this.__preBtn){
  //点击了上一页
  this._$setIndex(this.__index - 1);
 }else if(target == this.__nextBtn){
  //点击了下一页
  this._$setIndex(this.__index + 1);
 }else{
  //点击了数字
  var index = target.innerText;
  this._$setIndex(index);
 }

 };

 /**
 * 跳转页数
 */
 pro._$setIndex = function(index){

 index = parseInt(index);
 //更新信息
 if(index != this.__index){
  this.__last = this.__index;
  this.__index = index;
 }
 //处理
 delClassName(this.__preBtn, 'js-disabled');
 delClassName(this.__nextBtn, 'js-disabled');
 if(this.__total < 8){
  //总页数小于8的情况
  if(this.__last) delClassName(this.__numbers[this.__last - 1], 'js-selected');
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');

 }else{
  this.__dots[0].style.display = 'none';
  this.__dots[1].style.display = 'none';
  for(var i = 0; i < 7; i++){
  delClassName(this.__numbers[i], 'js-selected');
  };
  if(this.__index < 5){
  for(var i = 0; i < 6; i++){
   this.__numbers[i].innerText = i + 1;
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  }else if(this.__index > this.__total - 4){
  for(var i = 1; i < 7; i++){
   this.__numbers[i].innerText = this.__total + i -6;
  }
  this.__numbers[0].innerText = '1';
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  addClassName(this.__numbers[this.__index + 6 - this.__total], 'js-selected');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');
  }else{
  this.__numbers[0].innerText = '1';
  for(var i = 1; i < 6; i++){
   this.__numbers[i].innerText = this.__index - 3 + i;
   if(i == 3) addClassName(this.__numbers[i], 'js-selected');
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  }

 }
 if(typeof this.__onchange == 'function'){
  this.__onchange({
  index: this.__index,
  last: this.__last,
  total: this.__total
  })
 }

 };
 /**
 * 得到总页数
 */
 pro._$getIndex = function(){
 return this.__index;
 };
 /**
 * 得到上一个页数
 */
 pro._$getLast = function(){
 return this.__last;
 };
 //变成全局
 window.Pager = Pager;

})(window);

主要思路:

分页器共分为以下4种情况:

JQuery的Pager分页器实现代码

情况1,当total < 8 时,所有的页码全部显示。

情况2,当total >= 8 且 index < 5时,显示1-6和最后一页。

情况3,当total >= 8 且 index > total - 4时,显示1和最后6项。

情况4,当total >= 8 且 5 <= index <= total - 4时,显示1和最后一页,和中间5项。

Pager类实例化时传入一个设置对象:

{
 parent: element, //给分页器设置父节点
 index: index, //设置当前页
 total: total, //设置总页数
 onchange: function(){} //页数变化回调函数
}

当我们实例化Pager时,执行Pager函数体内的语句,首先赋值,然后就执行初始化函数:

var Pager = function(obj){
 //赋值
 this.__total = obj.total || 1;
 this.__index = obj.index || 1;
 this.__parent = obj.parent;
 this.__onchange = obj.onchange;
 //初始化分页器
 this.__init(obj);
};

初始化函数this.__init结构:

Pager.prototype.__init = function(obj){

 (根据上面分析的情况进行处理)
 ...
 this._$setIndex(this.__index); //跳转到初始页
 //绑定分页器点击函数
 this.__body.onclick = this.__doClick.bind(this);
};

初始化完成,点击后就会做出相应的判断,并使用this._$setIndex(index)进行跳转。

更多关于分页教程的文章,请查看以下专题:

下载:paper

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery为iframe的body添加click事件的实现代码
Apr 07 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
jQuery中的val()示例应用
Feb 26 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
Feb 23 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
JS数组方法some、every和find的使用详情
Oct 05 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 #Javascript
JQuery核心函数是什么及使用方法介绍
May 03 #Javascript
jquery对象访问是什么及使用方法介绍
May 03 #Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 #Javascript
javascript的BOM
May 03 #Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 #Javascript
深入浅析Bootstrap列表组组件
May 03 #Javascript
You might like
php URL编码解码函数代码
2009/03/10 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
php多任务程序实例解析
2014/07/19 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
vue3自定义dialog、modal组件的方法
2021/01/04 Vue.js
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python os.access()用法实例
2019/02/18 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
Python中Pyspider爬虫框架的基本使用详解
2021/01/27 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
公司自我介绍演讲稿
2014/08/21 职场文书
2014年医院工作总结
2014/11/20 职场文书
小学安全工作总结2015
2015/05/18 职场文书
商场广播稿范文
2015/08/19 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Java基础之线程锁相关知识总结
2021/06/30 Java/Android