网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于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 即可。
    具体看调用例子就明白了。
    源代码：
    /*分页控件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 = $("<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);
            }
          }
            
          //连续部分
          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,$);
    样式：
    样式很简单，可以自己调。
    .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，我会及时修正。
    以上就是本文的全部内容，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 8:01:14