jquery_jquery를 기반으로 간단한 페이징 제어 구현

프런트엔드 페이징 컨트롤이 많이 있습니다. 여기서는 jquery를 기반으로 하는 페이징 컨트롤 pagination.js 버전을 공유합니다.

먼저 미리보기를 살펴보겠습니다.

기본적으로 페이지 번호를 클릭하면 블로그 파크와 마찬가지로 URL 뒤에 "#p 페이지 번호"가 추가됩니다.

컨트롤에는 주의가 필요한 2개의 매개변수가 있습니다.

1. beforeRender: 각 페이지 번호 항목이 렌더링되기 전에 호출되며 매개변수는 페이지 번호의 jQuery 객체입니다. 이때 우리는 렌더링하기 전에 자체 속성을 추가하는 등의 일부 처리를 수행할 수 있습니다. 기본적으로 페이지 번호를 클릭하면 URL 뒤에 "#p 페이지 번호"가 추가됩니다. 이러한 URL은 페이지를 새로 고치지 않습니다. 예를 들어 URL이 "default.aspx?index=page number"인 경우 페이지를 새로 고쳐야 하는 경우 이 콜백 함수에서 이를 처리할 수 있습니다.

2. 콜백: 페이지 번호를 클릭하면 매개변수가 전체 옵션입니다. 페이지 번호를 클릭하면 Ajax 요청이 시작되지 않으며 직접 처리해야 합니다. options.index는 이번에 클릭한 페이지 번호입니다. 때로는 총 개수가 변경될 수 있으며 콜백이 옵션 매개변수를 반환할 수 있습니다. 여기서는 총 개수만 재설정한 다음 반환하면 됩니다.

호출 예시를 보시면 이해하실 수 있습니다.

소스코드:

/*分页控件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 &#63; (_dftOpts.size > count &#63; count : _dftOpts.size) : 1;
    var _page = Math.ceil(count / _size);
    var _index = _dftOpts.index > 0 &#63; (_dftOpts.index > _page &#63; _page : _dftOpts.index) : 1;
    var _lrcount = _dftOpts.lrCount * 2 + 1 > _page &#63; parseInt((_page - 1) / 2) : _dftOpts.lrCount;    
    var _continueCount = _lrcount * 2 + 1;
    var _lCount = _dftOpts.lCount <= 0 &#63; 0 : (_dftOpts.lCount > _page &#63; _page - 1 : _dftOpts.lCount);
    var _rCount = _dftOpts.rCount <= 0 &#63; 0 : (_dftOpts.rCount > _page &#63; _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 &#63; 1 : _index - 1;
      var next = _index >= _page &#63; _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 &#63; _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에는 아직 몇 가지 단점과 버그가 있을 수 있으며, 시간이 지나면 수정하겠습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.