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 相关文章推荐
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
JavaScript实现原型封装轮播图
Dec 27 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
example2.php
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
脚本收藏iframe
2006/07/21 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
微信小程序实现拼图小游戏
2020/10/22 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
int和Integer有什么区别
2013/05/25 面试题
培训讲师岗位职责
2014/04/13 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
市场督导岗位职责
2015/04/10 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
七年级上册生物的课件
2019/08/07 职场文书