分页栏插件

最新推荐文章于 2021-08-06 14:30:34 发布

KrystalQ

最新推荐文章于 2021-08-06 14:30:34 发布

阅读量533

点赞数

分类专栏： web前端文章标签： jquery插件

本文链接：https://blog.csdn.net/KrystalQ/article/details/48055365

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html>
<html>
<head>
  <title>pagebar</title>
  <meta charset='utf-8'>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="./pagebar.js"></script>
    <script type="text/javascript">
    $(function(){
      var pageBar=$('.hPagenation').pagenation({totalPage:11},'showPageCallBack');
    });

    /*点击页码栏中页码之后要触发事件*/
    function showPageCallBack(pageNow){
      console.log('当前页码:'+pageNow);
    }
    </script>
</head>
<body>
   <div class="hPagenation"></div> 
</body>
</html>

js代码：

/**
 * jquery.pagebar.js
 * 
 * Date: Mon August 28 2015
 */

(function($){

  var defaults={

    /*总页数*/
    totalPage:1,

    /*页码栏每次显示的个数*/
    showTotalPage:5
  }

  /*页码栏*/
  function pageBar(elem,params,pageCallBackFunc){
    this.params=$.extend({},defaults,params);
    this.$pageRootElem=$(elem);
    this._init(elem);
    this.listenPage(elem,this,pageCallBackFunc);
  }

pageBar.prototype={

    _init:function(elem){

        var pageNum=this.params.totalPage;
        var showTotalPage=this.params.showTotalPage;

        var dataTotals=pageNum*showTotalPage;

         $(elem).append("<span class='dataTotal'>共"+dataTotals+"条数据&nbsp;共"+pageNum+"页&nbsp;</span>");
        if(1==pageNum){
            $(elem).append("<a class='currPage' href='javascript:void(0)'>1</a>");
        }else{
            var pageBarHtml="<a class='prePage criticalPoint' href='javascript:void(0)'>&lt上一页</a>"+
                            "<a class='currPage' href='javascript:void(0)'>1</a>";
            for(var i=2;i<=showTotalPage;i++){
                 pageBarHtml+="<a  href='javascript:void(0)'>"+i+"</a>";
            } 
            if(pageNum>showTotalPage){
                pageBarHtml+="<a class='nextOther' href='javascript:void(0)'><span value='"+(showTotalPage+1)+"'>…</span></a>";   
            }
            pageBarHtml+="<a class='nextPage' href='javascript:void(0)'>下一页&gt</a>";
            $(elem).append(pageBarHtml);
        }
        this.renderStyle(elem);
        return elem;
    },

    /*获取当前页码*/
     getPageNow:function(){     
        return $('a.currPage').text();
     },

   /* 页码监听事件*/
     listenPage:function(elem,pagebarObj,pageCallBackFunc){
        var maxPageNum=pagebarObj.params.totalPage;

        $(elem).children('a').click(function(){
          var $curr=$(this);
          if($curr.hasClass("criticalPoint")){return;}

           $(elem).children('a').removeClass('criticalPoint');

           /*上下页的监听*/
          if($curr.hasClass('prePage')){
             $curr=$('a.currPage').prev('a');
          }else if($curr.hasClass('nextPage')){
              $curr=$('a.currPage').next('a');
          }else{
               var pageNow=$curr.text();
                if(1==pageNow){
                  $(elem).children('.prePage').addClass('criticalPoint');
               }else if(maxPageNum==pageNow){
                 $(elem).children('.nextPage').addClass('criticalPoint');
               } 
          }
          $(elem).children('a').removeClass('currPage');
          $curr.addClass('currPage');


         /* ……展开页码的监听*/
          if($curr.hasClass('nextOther')||$curr.hasClass('prevOther')){
              pagebarObj.showOtherPage(elem,$curr,pagebarObj,pageCallBackFunc);
           }

          pagebarObj.renderStyle(elem);

           //触发点击后相应的函数处理
           var  func=eval(pageCallBackFunc);
           func(pagebarObj.getPageNow());
        });
     },

     /* ……页码栏的展开*/
     showOtherPage:function(elem,$curr,pagebarObj,pageCallBackFunc){
            var maxPageNum=pagebarObj.params.totalPage;
            var showPageNum=pagebarObj.params.showTotalPage;
       var pageBarHtml="<span class='dataTotal'>共"+(maxPageNum*showPageNum)+"条数据&nbsp;共"+maxPageNum+"页&nbsp;</span>";

/*展开后一部分的页码*/
  if($curr.hasClass('nextOther')){
           var nextStartPage=$curr.children('span').attr('value');
           var leftPageNum=maxPageNum-nextStartPage;
             pageBarHtml+="<a class='prePage' href='javascript:void(0)'>&lt上一页</a>";

            if(leftPageNum<showPageNum){
                pageBarHtml+="<a class='prevOther' href='javascript:void(0)'><span value='"+(nextStartPage-showPageNum)+"'>…</span></a>";
                var beforePageNum=showPageNum-leftPageNum;
                for(var i=beforePageNum-1;i>0;i--){
                    pageBarHtml+="<a href='javascript:void(0)'>"+(nextStartPage-i)+"</a>";
                }
                for(var afterIndex=0;afterIndex<=leftPageNum;afterIndex++){
                   pageBarHtml+="<a href='javascript:void(0)'>"+(parseInt(nextStartPage)+parseInt(afterIndex))+"</a>";
                }
                pageBarHtml+="<a class='nextPage' href='javascript:void(0)'>下一页&gt</a>";
            }else{
                pageBarHtml+="<a class='prevOther' href='javascript:void(0)'><span value='"+(parseInt(nextStartPage)-parseInt(1))+"'>…</span></a>";
                  var endPageIndex=parseInt(nextStartPage)+parseInt(showPageNum);
                  for(var i=0;i<showPageNum;i++){
                     pageBarHtml+="<a href='javascript:void(0)'>"+(parseInt(nextStartPage)+parseInt(i))+"</a>";
                  }
                  pageBarHtml+="<a class='nextOther' href='javascript:void(0)'><span value='"+endPageIndex+"'>…</span></a>"+
                                "<a class='nextPage' href='javascript:void(0)'>下一页&gt</a>";       
            } 
            $(elem).html(pageBarHtml);
            $(elem).children('a').eq(2).addClass('currPage');

  }else if($curr.hasClass('prevOther')){
          var beforeEndPage=$curr.children('span').attr('value');      

          /*展开后最后的页码值*/
          var resortEndIndex=showPageNum+1;
          var pageBarHtml="";
            if(beforeEndPage-showPageNum<=0){
                var beforePageNum=showPageNum-beforeEndPage;
                for(var i=1;i<beforeEndPage;i++){
                    pageBarHtml+="<a href='javascript:void(0)'>"+i+"</a>";
                }
                for(var afterIndex=beforeEndPage;afterIndex<=showPageNum;afterIndex++){
                   pageBarHtml+="<a href='javascript:void(0)'>"+afterIndex+"</a>";
                }
            }else{
                 pageBarHtml+="<a class='prePage' href='javascript:void(0)'>&lt上一页</a>"+
                              "<a class='prevOther' href='javascript:void(0)'><span value='"+(parseInt(beforeEndPage)-parseInt(showPageNum))+"'>…</span></a>";
                  for(var i=showPageNum;i>0;i--){
                     pageBarHtml+="<a href='javascript:void(0)'>"+(parseInt(beforeEndPage)-parseInt(i-1))+"</a>";
                  }
                  resortEndIndex=parseInt(beforeEndPage)-parseInt(1)    
            } 

          pageBarHtml+="<a class='nextOther' href='javascript:void(0)'><span value='"+resortEndIndex+"'>…</span></a>"+
                          "<a class='nextPage' href='javascript:void(0)'>下一页&gt</a>";  
          $(elem).html(pageBarHtml);
          $(elem).children('a').eq(-3).addClass('currPage');
  }
            /* 重新监听页码选择事件*/
            pagebarObj.listenPage(elem,pagebarObj,pageCallBackFunc);
     },
     renderStyle:function(elem){
          $(elem).css({'margin-top':'100px'});
          $(elem).children('a').css({"text-decoration":"none","margin-right":"5px","padding":"2px 10px","border":"1px solid #D4D4D4","background":"white","color":"#00acf6"});
          $(elem).children('a.currPage').css({'border':'0','background':'#F4F4F4','color':'#656565'});
          $(elem).children('.criticalPoint').css({'color':'#d4d4d4','background': '#F4F4F4'});
     },
     getPageTotal:function(){
        return this.params.totalPage;
     },
     getPageNow:function(elem){
        return this.$pageRootElem.children('a.currPage').text();
     }
}


 $.fn.pagenation=function(args,pageCallBackFunc){
   var myPageBar=new pageBar(this,args,pageCallBackFunc);
   return myPageBar;
 }

})(jQuery)