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 相关文章推荐
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
JS使用贪心算法解决找零问题示例
Nov 27 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
JS实现简单九宫格抽奖
Jun 28 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函数(简单整理)
2010/04/30 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php合并js请求的例子
2013/11/01 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
基于原生JS封装的Modal对话框插件的示例代码
2020/09/09 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python实现合并两个排序的链表
2019/03/03 Python
python 实现识别图片上的数字
2019/07/30 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python之字典对象的几种创建方法
2020/09/30 Python
Python colormap库的安装和使用详情
2020/10/06 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
个人评价范文分享
2014/01/11 职场文书
留学推荐信写作指南
2014/01/25 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
车间班组长竞聘书
2015/09/15 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android