最实用的jQuery分页插件
作者:赵青
这篇文章主要为大家详细介绍了最实用的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分页功能汇总进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
- jquery分页插件jquery.pagination.js使用方法解析
- Jquery 分页插件之Jquery Pagination
- 分享一个自己动手写的jQuery分页插件
- Ajax分页插件Pagination从前台jQuery到后端java总结
- jQuery ajax分页插件实例代码
- 基于bootstrap3和jquery的分页插件
- jQuery插件分享之分页插件jqPagination
- jquery ajax分页插件的简单实现
- jquery+css3打造一款ajax分页插件(自写)
- 使用JQuery实现的分页插件分享
- jQuery实现的分页插件完整示例