最实用的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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
基于Vue SEO的四种方案(小结)
Jul 01 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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写的采集程序
2007/03/16 PHP
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
Jquery之美中不足小结
2011/02/16 Javascript
jQuery中使用了document和window哪些属性和方法小结
2011/09/13 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
Python中itertools模块用法详解
2014/09/25 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python使用多线程编写tcp客户端程序
2019/09/02 Python
百度JavaScript笔试题
2015/01/15 面试题
高级销售员求职信
2013/10/25 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
企业年会祝酒词
2015/08/11 职场文书
导游词之云南-元阳梯田
2019/10/08 职场文书
浅析Python实现DFA算法
2021/06/26 Python
MySQL的存储过程和相关函数
2022/04/26 MySQL