在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个jQuery的分页插件，该插件主要实现上下翻页，输入数字跳转等功能。
具体实现如下：
输入参数需要当前页码pageNo，总页码totalPage，回调函数callback。
主要的实现有两个函数，一个是根据当前页和总页数生成相应的html的代码，一个是事件绑定及回调函数的执行。
creatHtml函数：
1){
content += "<";
}
//总页数大于7，根据当前页显示省略号，否则显示全部页码
if(total > 7){
if(current < 4){
for(var i=1;i<7;i++){
if(current==i){
content += ""+i+"";
}else{
content += ""+i+"";
}
}
content += "...";
content += ""+total+"";
}else{
if(current < total - 3){
content += "1";
content += "...";
for(var i=current-2;i";
}else{
content += ""+i+"";
}
}
content += "...";
content += ""+total+"";
}else{
content += "1";
content += "...";
for(var i=total-5;i";
}else{
content += ""+i+"";
}
}
}
}
}else{
for(var i=1;i";
}else{
content += ""+i+"";
}
}
}
//当前页小于总页数，显示向下翻页按钮
if(current < total){
content += ">";
}
//输入跳转
content += " 到第 ";
content += "";
content += " 页 ";
content += "Go";
//更新HTML
me.element.html(content);
}
bindEvent函数：
分页点击事件
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);
}
});
}
将函数封装起来，完整如下：
1){
content += "<";
}
if(total > 7){
if(current < 4){
for(var i=1;i<7;i++){
if(current==i){
content += ""+i+"";
}else{
content += ""+i+"";
}
}
content += "...";
content += ""+total+"";
}else{
if(current < total - 3){
content += "1";
content += "...";
for(var i=current-2;i";
}else{
content += ""+i+"";
}
}
content += "...";
content += ""+total+"";
}else{
content += "1";
content += "...";
for(var i=total-5;i";
}else{
content += ""+i+"";
}
}
}
}
}else{
for(var i=1;i";
}else{
content += ""+i+"";
}
}
}
if(current < total){
content += ">";
}
content += " 到第 ";
content += "";
content += " 页 ";
content += "Go";
me.element.html(content);
},bindEvent:function(){
var me=this;
me.element.on('click',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,document);
HTML：
js引用：
这里加了一些简单的样式，可以根据具体的ui设计来设计样式。
更多精彩内容请点击：进行学习。
原文链接：https://www.f2er.com/jquery/45352.html