最实用的jQuery分页插件

2019-11-20 08:48:16

字体：大中小

来源：转载

供稿：网友

在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个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：

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分页功能汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：手机浏览器后退按钮强制刷新页面方法总结

下一篇：js本地图片预览实现代码