前臺分頁控件有很多，這里分享我的分頁控件 pagination.js 1.0版本，該控件基于jquery。

先來看一下預(yù)覽效果：

默認情況下，點擊頁碼會像博客園一樣，在url后面加上"#p頁碼"。

控件有2個參數(shù)需要注意：

1. beforeRender: 在每個頁碼項呈現(xiàn)前會被調(diào)用，參數(shù)為頁碼的jQuery對象。這個時候我們可以在呈現(xiàn)前做一些處理，例如增加自己的屬性等。默認情況下，點擊頁碼，會在url后面加上“#p頁碼”，這樣的url并不會刷新頁面。如果我們需要刷新頁面，例如url為，"default.aspx?index=頁碼"，就可以在這個回調(diào)函數(shù)里處理。

2. callback: 點擊頁碼觸發(fā)，參數(shù)為整個options。點擊頁碼并不會發(fā)起ajax請求，需要自己處理，options.index 就是本次點擊的頁碼。有時候我們的總數(shù)可能會變化，callback 可以將 options 參數(shù)回傳，這里只要重新設(shè)置總數(shù)，然后 return 即可。

具體看調(diào)用例子就明白了。

源代碼：

/*分頁控件v1.0

 date:2015.08.26

*/

(function(window,$){

  $.fn.pagination = function(options){

    var _dftOpts = {

      count:0,//總數(shù)

      size:10,//每頁數(shù)量

      index:1,//當前頁

      lrCount:5,//當前頁左右最多顯示的數(shù)量

      lCount:0,//最開始預(yù)留的數(shù)量

      rCount:0,//最后預(yù)留的數(shù)量

      first:"首頁",

      last:"尾頁",

      before:"上一頁",

      next:"下一頁",     

      callback:null,//點擊事件

      beforeRender:null//項呈現(xiàn)前

    };

    $.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 = $("<div>",{"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);

        }

      }

      //連續(xù)部分

      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);

        }

      }

      appendFirstAndLast();

    }

    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 appendFirstAndLast(){

      var jFirst = $("<a>",{text:_first});

      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").first());

      jFirst.insertBefore(jBefore);

      if(_index === 1){

        jFirst.addClass("disabled");

        jBefore.addClass("disabled");

      }else{

        jFirst.attr("href",_url+1);

        jBefore.attr("href",_url+(_index-1));

      }

      if(_index === _page){

        jLast.addClass("disabled");

        jNext.addClass("disabled");

      }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("disabled")){

          jthis.addClass("hover");

        }

      }).on("mouseout","a",function(){

        var jthis = $(this);

        if(!jthis.hasClass("active")){

          jthis.removeClass("hover");

        }

      }).on("click","a",function(){

        var jItem = $(this);

        if(jItem.hasClass("disabled")){

          return;

        }

        var text = jItem.text();

        var index = 0;

        switch(text){

          case _first:

            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,$);

樣式：

樣式很簡單，可以自己調(diào)。

.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;}

使用例子：

$(".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，我會及時修正。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。