最实用的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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
JS实现标签页切换效果
May 04 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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
神族 PROTOSS 概述
2020/03/14 星际争霸
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
JS实现方形抽奖效果
2018/08/27 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python 登录网站详解及实例
2017/04/11 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
Scrapy基于scrapy_redis实现分布式爬虫部署的示例
2020/09/29 Python
用python制作个视频下载器
2021/02/01 Python
Linux如何压缩可执行文件
2013/10/21 面试题
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
介绍信怎么写
2015/01/30 职场文书
圣诞晚会主持词
2015/07/01 职场文书
建房合同协议书
2016/03/21 职场文书