最实用的jQuery分页插件


Posted in Javascript onOctober 09, 2016

在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能。

最实用的jQuery分页插件

具体实现如下:

输入参数需要当前页码pageNo,总页码totalPage,回调函数callback。

主要的实现有两个函数,一个是根据当前页和总页数生成相应的html的代码,一个是事件绑定及回调函数的执行。

creatHtml函数:

creatHtml:function(){
 var me=this;
 var content="";
//当前页码
 var current=me.options.pageNo;

//总页码
 var total=me.options.totalPage;

//当前页码大于1显示向上翻页按钮
 if(current > 1){
 content += "<a><</a>";
 }

//总页数大于7,根据当前页显示省略号,否则显示全部页码
 if(total > 7){
 if(current < 4){
  for(var i=1;i<7;i++){
  if(current==i){
   content += "<a class='current'>"+i+"</a>";
  }else{
   content += "<a>"+i+"</a>";
  }
  }
  content += "...";
  content += "<a>"+total+"</a>";
 }else{
  if(current < total - 3){
  content += "<a name='1' type='button' class='page num'>1</a>";
  content += "...";
  for(var i=current-2;i<current+3;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  content += "...";
  content += "<a>"+total+"</a>";
  }else{
  content += "<a>1</a>";
  content += "...";
  for(var i=total-5;i<total+1;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  }
 }
 }else{
 for(var i=1;i<total+1;i++){
  if(current==i){
  content += "<a class='current'>"+i+"</a>";
  }else{
  content += "<a>"+i+"</a>";
  }
 }
 }

//当前页小于总页数,显示向下翻页按钮
 if(current < total){
 content += "<a>></a>";
 }

//输入跳转
 content += " 到第 ";
 content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
 content += " 页 ";
 content += "<a>Go</a>";

//更新HTML
 me.element.html(content);
}

bindEvent函数:

bindEvent:function(){
 var me=this;
//分页点击事件
 me.element.on('click','a',function(){
 var num=$(this).html();
 if(num=="<"){//上翻
  me.options.pageNo=+me.options.pageNo-1;
 }else if(num==">"){//下翻
  me.options.pageNo=+me.options.pageNo+1;
 }else if(num=="Go"){//输入页码跳转
  var ipt=+me.element.find('input').val();
  if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
  me.options.pageNo=ipt;
  }
 }else{//直接跳转
  me.options.pageNo=+num;
 }


//更新html
 me.creatHtml();


//调用回调函数,返回当前页码
 if(me.options.callback){
  me.options.callback(me.options.pageNo);
 }
 });
}

将函数封装起来,完整如下:

;(function($,window,document,undefined){
 var initDate={
 pageNo:1,
 totalPage:1,
 callback:function(){}
 };
 function Paging(element,options){
 this.element = element;
 this.options=options=$.extend(initDate,options||{});
 this.init();
 }
 Paging.prototype={ 
 constructor:Paging,
 init:function(){
  this.creatHtml();
  this.bindEvent();
 },
 creatHtml:function(){
  var me=this;
  var content="";
  var current=me.options.pageNo;
  var total=me.options.totalPage;
  if(current > 1){
  content += "<a><</a>";
  }
  if(total > 7){
  if(current < 4){
   for(var i=1;i<7;i++){
   if(current==i){
    content += "<a class='current'>"+i+"</a>";
   }else{
    content += "<a>"+i+"</a>";
   }
   }
   content += "...";
   content += "<a>"+total+"</a>";
  }else{
   if(current < total - 3){
   content += "<a name='1' type='button' class='page num'>1</a>";
   content += "...";
   for(var i=current-2;i<current+3;i++){
    if(current==i){
    content += "<a class='current'>"+i+"</a>";
    }else{
    content += "<a>"+i+"</a>";
    }
   }
   content += "...";
   content += "<a>"+total+"</a>";
   }else{
   content += "<a>1</a>";
   content += "...";
   for(var i=total-5;i<total+1;i++){
    if(current==i){
    content += "<a class='current'>"+i+"</a>";
    }else{
    content += "<a>"+i+"</a>";
    }
   }
   }
  }
  }else{
  for(var i=1;i<total+1;i++){
   if(current==i){
   content += "<a class='current'>"+i+"</a>";
   }else{
   content += "<a>"+i+"</a>";
   }
  }
  }
  if(current < total){
  content += "<a>></a>";
  }
  content += " 到第 ";
  content += "<input max='3' maxlength='3' value='"+current+"' type='text' />";
  content += " 页 ";
  content += "<a>Go</a>";
  me.element.html(content);
 },
 bindEvent:function(){
  var me=this;
  me.element.on('click','a',function(){
  var num=$(this).html();
  if(num=="<"){
   me.options.pageNo=+me.options.pageNo-1;
  }else if(num==">"){
   me.options.pageNo=+me.options.pageNo+1;
  }else if(num=="Go"){
   var ipt=+me.element.find('input').val();
   if(ipt&&ipt<=me.options.totalPage&&ipt!=me.options.pageNo){
   me.options.pageNo=ipt;
   }
  }else{
   me.options.pageNo=+num;
  }
  me.creatHtml();
  if(me.options.callback){
   me.options.callback(me.options.pageNo);
  }
  });
 }
 };
 $.fn.paging=function(options){
 options=$.extend(initDate,options||{});
 return new Paging($(this),options);
 }
})(jQuery,window,document);

HTML:

<div id="page"></div>

js引用:

$('#page').paging({pageNo:2,totalPage:10,callback:function(cur){
 console.log(‘当前页:'+cur);//当前页:2
}});

这里加了一些简单的样式,可以根据具体的ui设计来设计样式。

<style type="text/css">
 a{
 width: 23px;
 height: 23px;
 border: 1px solid #dce0e0;
 text-align: center;
 margin: 0 4px;
 cursor: pointer;
 display: inline-block;
 }
 .current{
 background-color: #5ac3e7;
 }
 </style>

github地址:https://github.com/Martian1/jQuery.paging.js

更多精彩内容请点击:jquery分页功能汇总进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的array数组使用技巧
Jan 31 Javascript
Array.prototype 的泛型应用分析
Apr 30 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
JavaScript中textRange对象使用方法小结
Mar 24 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
QML实现圆环颜色选择器
Sep 25 Javascript
js本地图片预览实现代码
Oct 09 #Javascript
js html css实现复选框全选与反选
Oct 09 #Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 #Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 #Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 #Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 #Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 #Javascript
You might like
php adodb操作mysql数据库
2009/03/19 PHP
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
vue中的ref和$refs的使用
2018/11/22 Javascript
vue-router懒加载速度缓慢问题及解决方法
2018/11/25 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
python抓取某汽车网数据解析html存入excel示例
2013/12/04 Python
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
在Python中操作时间之mktime()方法的使用教程
2015/05/22 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Python实现的读写json文件功能示例
2018/06/05 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
python处理RSTP视频流过程解析
2020/01/11 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python怎么判断素数
2020/07/01 Python
Pycharm调试程序技巧小结
2020/08/08 Python
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
主要的Ajax框架都有什么
2013/11/14 面试题
鲁迅故里导游词
2015/02/05 职场文书
重阳节简报
2015/07/20 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL