基于jquery实现简单的分页控件

前台分页控件有很多，这里分享我的分页控件 pagination.js 1.0版本，该控件基于jquery。

先来看一下预览效果：

默认情况下，点击页码会像博客园一样，在url后面加上"#p页码"。

控件有2个参数需要注意：

1. beforeRender: 在每个页码项呈现前会被调用，参数为页码的jQuery对象。这个时候我们可以在呈现前做一些处理，例如增加自己的属性等。默认情况下，点击页码，会在url后面加上“#p页码”，这样的url并不会刷新页面。如果我们需要刷新页面，例如url为，"default.aspx?index=页码"，就可以在这个回调函数里处理。

2. callback: 点击页码触发，参数为整个options。点击页码并不会发起ajax请求，需要自己处理，options.index 就是本次点击的页码。有时候我们的总数可能会变化，callback 可以将 options 参数回传，这里只要重新设置总数，然后 return 即可。

具体看调用例子就明白了。

源代码：

rush:js;"> /*分页控件v1.0 date:2015.08.26 */ (function(window,$){ $.fn.pagination = function(options){ var _dftOpts = { count:0,//总数 size:10,//每页数量 index:1,//当前页 lrCount:5,//当前页左右最多显示的数量 lCount:0,//最开始预留的数量 rCount:0,//最后预留的数量 first:"首页",last:"尾页",before:"上一页",next:"下一页",callback:null,//点击事件 beforeRender:null//项呈现前 }; $.extend(_dftOpts,options); var count = _dftOpts.count; if(count <= 0) return; var _ellipsis = "..."; var _size = _dftOpts.size > 0 ? (_dftOpts.size > count ? count : _dftOpts.size) : 1; var _page = Math.ceil(count / _size); var _index = _dftOpts.index > 0 ? (_dftOpts.index > _page ? _page : _dftOpts.index) : 1; var _lrcount = _dftOpts.lrCount * 2 + 1 > _page ? parseInt((_page - 1) / 2) : _dftOpts.lrCount; var _continueCount = _lrcount * 2 + 1; var _lCount = _dftOpts.lCount <= 0 ? 0 : (_dftOpts.lCount > _page ? _page - 1 : _dftOpts.lCount); var _rCount = _dftOpts.rCount <= 0 ? 0 : (_dftOpts.rCount > _page ? _page - 1 : _dftOpts.rCount); var _first = _dftOpts.first; var _before = _dftOpts.before; var _last = _dftOpts.last; var _next = _dftOpts.next; var _FromTo; var _url = location.pathname + location.search + "#p"; var jthis = this; var jPager = $("

",{"class":"pager"}); initJPager(); jthis.append(jPager); regisiterEvent(); return jthis;

/*function*/    
function initJPager(){
  _FromTo = GetFromTo();
  var from = _FromTo.from;
  var to = _FromTo.to;
  var before = _index <= 1 ? 1 : _index - 1;
  var next = _index >= _page ? _page : _index + 1;
  var beforeLast = _page - 1;
  var jPrevs,jNexts;
  var i;

  //前   
  if(from === 2 && _lCount > 0){
    appendLink(1);
  }else if(from > _lCount + 1){
    for(i = 0;i < _lCount;i++){
      appendLink(i + 1);          
    }
    if(_lCount > 0){
      appendEllipsis();
    }
  }else{        
    for(i = 1;i < from;i++){
      appendLink(i);
    }
  }

  //连续部分
  for(i = from;i <= to;i++){
    if(i === _index){              
      appendLink(i,true);
    }else{
      appendLink(i);
    }
  }

  //后
  if(to === beforeLast && _rCount > 0){      
    appendLink(_page);
  }else if(to < _page - _rCount){
    if(_rCount > 0){
      appendEllipsis();
    }
    for(i = _page - _rCount;i < _page;i++){
      appendLink(i + 1);
    }
  }else{
    for(i = to;i < _page;i++){
      appendLink(i + 1);
    }
  }

  appendF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tAndLast();
}
function GetFromTo(){
  var from,to;
  from = _index - _lrcount;
  if(from <= 1){
    return {from:1,to:_continueCount};
  }
  if(_page - _index < _lrcount){
    from = _page - _continueCount + 1;        
    return {from:from,to:_page};
  }
  to = _index + _lrcount;
  to = to > _page ? _page : to;    
  return {from:from,to:to};      
}    
function appendLink(index,active){
  var jA = $("<a>",{text:index,href:_url+index});
  if(active){
    jA.addClass("active");
  }
  if(_dftOpts.beforeRender){
    _dftOpts.beforeRender(jA);
  }
  jPager.append(jA);
}
function appendF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>tAndLast(){
  var jF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t = $("<a>",{text:_f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t});
  var jBefore = $("<a>",{text:_before});
  var jLast = $("<a>",{text:_last});
  var jNext = $("<a>",{text:_next});
  jPager.append(jNext).append(jLast);
  jBefore.insertBefore(jPager.find("a").f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t());
  jF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t.insertBefore(jBefore);
  if(_index === 1){
    jF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t.addClass("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled");
    jBefore.addClass("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled");
  }else{
    jF<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t.attr("href",_url+1);
    jBefore.attr("href",_url+(_index-1));
  }
  if(_index === _page){
    jLast.addClass("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled");
    jNext.addClass("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled");
  }else{
    jLast.attr("href",_url+_page);          
    jNext.attr("href",_url+(_index+1));
  }     
}
function appendEllipsis(){
  jPager.append(_ellipsis);
}
//event
function regisiterEvent(){
  jPager.on("mouseenter","a",function(){
    var jthis = $(this);
    if(!jthis.hasClass("active") && !jthis.hasClass("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled")){
      jthis.addClass("hover");
    }
  }).on("mou<a href="https://www.jb51.cc/tag/SEO/" title="SEO">SEO</a>ut",function(){
    var jthis = $(this);
    if(!jthis.hasClass("active")){
      jthis.removeClass("hover");
    }
  }).on("click",function(){
    var jItem = $(this);
    if(jItem.hasClass("<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>abled")){
      return;
    }
    var text = jItem.text();
    var index = 0;
    switch(text){
      case _f<a href="https://www.jb51.cc/tag/irs/" target="_blank" class="keywords">irs</a>t:
        index = 1;
        break;
      case _before:
        index = _index - 1;
        break;
      case _last:
        index = _page;
        break;
      case _next:
        index = _index + 1;
        break;
      default:
        index = parseInt(text);
        break;
    }        
    var callback = _dftOpts.callback;
    var newOpts;
    _dftOpts.index = index;
    jPager.remove();
    if(callback){
      newOpts = callback(_dftOpts);
    }
    if(newOpts){
      _dftOpts = newOpts;
    }
    jthis.pagination(_dftOpts);        
  });           
}

}
})(window,$);

样式：

样式很简单，可以自己调。

rush:css;"> .pager{height:30px;line-height:30px;font-size: 12px;margin: 25px 0px;text-align: center;color: #2E6AB1;overflow: hidden;} .pager a{border:1px solid #9AAFE5;color:#2E6AB1;margin:0px 5px;padding:5px 8px;text-decoration: none;} .pager a.hover,.pager a.active{background-color:#2E6AB1;border-color:#000080;color:#FFF;} .pager a.disabled{color:#C8CDD2;cursor:auto;}

使用例子：

rush:js;"> $(".div1").pagination({ count:200,size:10,index:1,lrCount:3,lCount:1,rCount:1,callback:function(options){ //alert(options.index); //options.count = 300; //return options; },beforeRender:function(jA){ //jA.attr("href","default.aspx?index="+jA.text()); } });

pagination.js 1.0 还有可能还有一些不足和bug，我会及时修正。

以上就是本文的全部内容，希望对大家的学习有所帮助。

jquery 分页控件

上一篇：jQuery实现图片局部放大镜效果下一篇：基于jquery实现智能提示控件intell

基于jquery实现简单的分页控件

相关推荐