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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
javascript动态加载二
Aug 22 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
Vue.js路由组件vue-router使用方法详解
Dec 02 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
vue中data里面的数据相互使用方式
Jun 05 Vue.js
个人网站留言页面(前端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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
2017/01/01 Javascript
js实现动态显示时间效果
2017/03/06 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
Python比较文件夹比另一同名文件夹多出的文件并复制出来的方法
2015/03/05 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
安装python及pycharm的教程图解
2019/10/10 Python
python 读取数据库并绘图的实例
2019/12/03 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Python小白学习爬虫常用请求报头
2020/06/03 Python
python中append函数用法讲解
2020/12/11 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
幼儿园园长岗位职责
2013/11/26 职场文书
上班上网检讨书
2014/01/29 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
创先争优活动承诺书
2014/08/30 职场文书
小学运动会开幕词
2015/01/28 职场文书
酒桌上的开场白
2015/06/01 职场文书
闪闪红星观后感
2015/06/08 职场文书
Python Numpy库的超详细教程
2022/04/06 Python