首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

JQuery的Pager分页器实现代码

- Author -

康东扬

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
高效率JavaScript编写技巧整理
Aug 23 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
JavaScript多并发问题如何处理
Oct 28 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
Vue.js 递归组件实现树形菜单（实例分享）
Dec 21 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
使用jQuery实现购物车
Oct 29 jQuery
个人网站留言页面（前端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
YB217(1) 东方红(1) 再生机(1) 直流胆(1) 德生(17) PL-365(1) YB400(2) YB235(1) 1 Tube Radio(1) 森海(1)
You might like
php类常量的使用详解
2013/06/08 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
在JavaScript中，为什么要尽可能使用局部变量？
2009/04/06 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
js实现DOM走马灯特效的方法
2015/01/21 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
浅谈React之状态(State)
2018/09/19 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
python append、extend与insert的区别
2016/10/13 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python针对给定列表中元素进行翻转操作的方法分析
2018/04/27 Python
python__name__原理及用法详解
2019/11/02 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
TensorFlow的环境配置与安装教程详解（win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5）
2020/06/22 Python
Microsoft Advertising美国：微软搜索广告
2019/05/01 全球购物
三星俄罗斯授权在线商店：Samsung俄罗斯
2019/09/28 全球购物
Java面试题及答案
2012/09/08 面试题
法人授权委托书样本
2014/09/19 职场文书
中学教师教学工作总结
2015/08/13 职场文书
python垃圾回收机制原理分析
2022/04/13 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android