你的位置:首页 > Java教程

[Java教程]简单实用的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=="&lt;"){//上翻 me.options.pageNo=+me.options.pageNo-1; }else if(num=="&gt;"){//下翻 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=="&lt;"){          me.options.pageNo=+me.options.pageNo-1;        }else if(num=="&gt;"){          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