jQuery Ajax 페이지 kkpager 플러그 인 인 인 스 턴 스 코드 구현

코드 세 션 1:

 <!--     JS CSS   -->
  <!--     CSS-->
  <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" />
  <!--     JS-->
  <script type="text/javascript" src="/resource/js/kkpager.min.js"></script>
  <script type="text/javascript" src="/resource/js/kkpager.js"></script> 
  <!--     JS CSS   -->
코드 세 션 2:

<script type="text/javascript">

  $(function () {
   
      //----             ----
      var totalPage = 20;//     
      var totalRecords = 200;//     
      var pagehref = window.location.href;
      var pageNo = GetQueryString('pno');
      if (!pageNo) {
        pageNo = 1;
      }
      //----             ----
//----                 ----
      function LoadingGoods() {     
     
        jQuery.ajax({
          url: 'baidu.com',
          type: "POST",
          dataType: "json",
          data: { '  1': 1, '  2': 2,'Page': pageNo, 'Limit': 20 },
          success: function (result) {
            if (result.success) {
              var count = result.result;
              var data = result.data;
              totalRecords = count;
              totalPage = Math.ceil(count / 20);
              
              if (count > 0) {
                $(".commodity_volume").html("");
                var str = "";
                for (var i = 0; i < data.length; i++) {
                  str += "<div class='commodity'></div>";
                }
                $(".commodity_volume").html(str);
              } else {
                $(".commodity_volume").html("");
                var str = "";
                str = "<div><center>          。</center></div>"
                $(".commodity_volume").html(str);
              }
              //----             ----
              kkpager.total = totalPage;
              kkpager.totalRecords = totalRecords;
              kkpager.generPageHtml({
                pno: pageNo,
                //   
                total: totalPage,
                //     
                totalRecords: totalRecords,
                //mode: 'click',
                //    
                hrefFormer: pagehref,
                //    
                hrefLatter: '',//hrefLatter: '.html'
                getLink: function (n) {
                  var hrefFormer = this.hrefFormer;
                  var url = this.hrefFormer + "&pno=" + n;
                  if (hrefFormer.indexOf("pno") > 0) {
                    var pno = GetQueryString("pno");
                    return this.hrefFormer.replace('pno=' + pno, 'pno=' + n);
                  } else {
                    return url;
                  }
                }
              });
              //----             ----
              //----       ----
              $('#AjaxLoading').hide()
              $(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
              $(".overlay").css({ 'display': 'none', 'opacity': '0' });
              //----       ----
            }
          },
          error: function () {
            alert("      !")
          }
        });
      } 
      LoadingGoods();//      
      //----                 ---- 
}   </script>
코드 세 션 3:

 <div id="kkpager"></div>
다음 코드:원본 에서 수정 한 적 이 있 습 니 다.ajax 페이지 가 제때에 전체 페이지 수 를 업데이트 할 수 없 기 때 문 입 니 다.

다음은 플러그 인 kkpager.js 코드 입 니 다.

/*
 kkpager V1.3
 https://github.com/pgkk/kkpager
 Copyright (c) 2013 [email protected]
 Licensed under the GNU GENERAL PUBLIC LICENSE
*/
var kkpager = {
    pagerid       : 'kkpager', //divID
    mode        : 'link', //  (link    click)
    pno          : 1, //    
    total        : 1, //   
    totalRecords    : 0, //     
    isShowFirstPageBtn  : true, //        
    isShowLastPageBtn  : true, //        
    isShowPrePageBtn  : true, //         
    isShowNextPageBtn  : true, //         
    isShowTotalPage   : true, //       
    isShowCurrPage    : true,//       
    isShowTotalRecords   : false, //        
    isGoPage       : true,  //           
    isWrapedPageBtns  : true,  //   span       
    isWrapedInfoTextAndGoPageBtn : true, //   span            
    hrefFormer      : '', //    
    hrefLatter      : '', //    
    gopageWrapId    : 'kkpager_gopage_wrap',
    gopageButtonId    : 'kkpager_btn_go',
    gopageTextboxId    : 'kkpager_btn_go_input',
    lang        : {
      firstPageText      : '  ',
      firstPageTipText    : '  ',
      lastPageText      : '  ',
      lastPageTipText      : '  ',
      prePageText        : '   ',
      prePageTipText      : '   ',
      nextPageText      : '   ',
      nextPageTipText      : '   ',
      totalPageBeforeText    : ' ',
      totalPageAfterText    : ' ',
      currPageBeforeText    : '   ',
      currPageAfterText    : ' ',
      totalInfoSplitStr    : '/',
      totalRecordsBeforeText  : ' ',
      totalRecordsAfterText  : '   ',
      gopageBeforeText    : '&nbsp;  ',
      gopageButtonOkText    : '  ',
      gopageAfterText      : ' ',
      buttonTipBeforeText    : ' ',
      buttonTipAfterText    : ' '
    },
    //    (   link  ),  n   
    getLink  : function(n){
      //          :
      //hrefFormer=http://www.xx.com/news/20131212
      //hrefLatter=.html
      //    ( 1 )  http://www.xx.com/news/20131212.html
      // 2   http://www.xx.com/news/20131212_2.html
      // n   http://www.xx.com/news/20131212_n.html
      if(n == 1){
        return this.hrefFormer + this.hrefLatter;
      }
      return this.hrefFormer + '_' + n + this.hrefLatter;
    },
    //          (   mode  ),  n   
    click  : function(n){
      //      
      //     this  kkpager  kkpager  
      return false;
    },
    //  href  (   mode  ),  n   
    getHref  : function(n){
      //    '#'
      return '#';
    },
    //          
    focus_gopage : function (){
      var btnGo = $('#'+this.gopageButtonId);
      $('#'+this.gopageTextboxId).attr('hideFocus',true);
      btnGo.show();
      btnGo.css('left','10px');
      $('#'+this.gopageTextboxId).addClass('focus');
      btnGo.animate({left: '+=30'}, 50);
    },
    //          
    blur_gopage : function(){
      var _this = this;
      setTimeout(function(){
        var btnGo = $('#'+_this.gopageButtonId);
        btnGo.animate({
          left: '-=25'
         }, 100, function(){
           btnGo.hide();
           $('#'+_this.gopageTextboxId).removeClass('focus');
         });
      },400);
    },
    //         
    keypress_gopage : function(){
      var event = arguments[0] || window.event;
      var code = event.keyCode || event.charCode;
      //delete key
      if(code == 8) return true;
      //enter key
      if(code == 13){
        kkpager.gopage();
        return false;
      }
      //copy and paste
      if(event.ctrlKey && (code == 99 || code == 118)) return true;
      //only number key
      if(code<48 || code>57)return false;
      return true;
    },
    //       
    gopage : function(){
      var str_page = $('#'+this.gopageTextboxId).val();
      if(isNaN(str_page)){
        $('#'+this.gopageTextboxId).val(this.next);
        return;
      }
      var n = parseInt(str_page);
      if(n < 1) n = 1;
      if(n > this.total) n = this.total;
      if(this.mode == 'click'){
        this._clickHandler(n);
      }else{
        window.location = this.getLink(n);
      }
    },
    //                 
    selectPage : function(n){
      this._config['pno'] = n;
      this.generPageHtml(this._config,true);
    },
    //      
    generPageHtml : function(config,enforceInit){
      if (enforceInit || !this.inited) {
        config.total = kkpager.total;
        config.totalRecords = kkpager.totalRecords;
        this.init(config);
      }
      var str_first='',str_prv='',str_next='',str_last='';
      if(this.isShowFirstPageBtn){
        if(this.hasPrv){
          str_first = '<a '+this._getHandlerStr(1)+' title="'
            +(this.lang.firstPageTipText || this.lang.firstPageText)+'">'+this.lang.firstPageText+'</a>';
        }else{
          str_first = '<span class="disabled">'+this.lang.firstPageText+'</span>';
        }
      }
      if(this.isShowPrePageBtn){
        if(this.hasPrv){
          str_prv = '<a '+this._getHandlerStr(this.prv)+' title="'
            +(this.lang.prePageTipText || this.lang.prePageText)+'">'+this.lang.prePageText+'</a>';
        }else{
          str_prv = '<span class="disabled">'+this.lang.prePageText+'</span>';
        }
      }
      if(this.isShowNextPageBtn){
        if(this.hasNext){
          str_next = '<a '+this._getHandlerStr(this.next)+' title="'
            +(this.lang.nextPageTipText || this.lang.nextPageText)+'">'+this.lang.nextPageText+'</a>';
        }else{
          str_next = '<span class="disabled">'+this.lang.nextPageText+'</span>';
        }
      }
      if(this.isShowLastPageBtn){
        if(this.hasNext){
          str_last = '<a '+this._getHandlerStr(this.total)+' title="'
            +(this.lang.lastPageTipText || this.lang.lastPageText)+'">'+this.lang.lastPageText+'</a>';
        }else{
          str_last = '<span class="disabled">'+this.lang.lastPageText+'</span>';
        }
      }
      var str = '';
      var dot = '<span class="spanDot">...</span>';
      var total_info='<span class="totalText">';
      var total_info_splitstr = '<span class="totalInfoSplitStr">'+this.lang.totalInfoSplitStr+'</span>';
      if(this.isShowCurrPage){
        total_info += this.lang.currPageBeforeText + '<span class="currPageNum">' + this.pno + '</span>' + this.lang.currPageAfterText;
        if(this.isShowTotalPage){
          total_info += total_info_splitstr;
          total_info += this.lang.totalPageBeforeText + '<span class="totalPageNum">'+this.total + '</span>' + this.lang.totalPageAfterText;
        }else if(this.isShowTotalRecords){
          total_info += total_info_splitstr;
          total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
        }
      }else if(this.isShowTotalPage){
        total_info += this.lang.totalPageBeforeText + '<span class="totalPageNum">'+this.total + '</span>' + this.lang.totalPageAfterText;;
        if(this.isShowTotalRecords){
          total_info += total_info_splitstr;
          total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
        }
      }else if(this.isShowTotalRecords){
        total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
      }
      total_info += '</span>';
      var gopage_info = '';
      if(this.isGoPage){
        gopage_info = '<span class="goPageBox">'+this.lang.gopageBeforeText+'<span id="'+this.gopageWrapId+'">'+
          '<input type="button" id="'+this.gopageButtonId+'" onclick="kkpager.gopage()" value="'
            +this.lang.gopageButtonOkText+'" />'+
          '<input type="text" id="'+this.gopageTextboxId+'" onfocus="kkpager.focus_gopage()" onkeypress="return kkpager.keypress_gopage(event);"  onblur="kkpager.blur_gopage()" value="'+this.next+'" /></span>'+this.lang.gopageAfterText+'</span>';
      }
      //    
      if(this.total <= 8){
        for(var i=1;i<=this.total;i++){
          if(this.pno == i){
            str += '<span class="curr">'+i+'</span>';
          }else{
            str += '<a '+this._getHandlerStr(i)+' title="'
              +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
          }
        }
      }else{
        if(this.pno <= 5){
          for(var i=1;i<=7;i++){
            if(this.pno == i){
              str += '<span class="curr">'+i+'</span>';
            }else{
              str += '<a '+this._getHandlerStr(i)+' title="'+
                this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
            }
          }
          str += dot;
        }else{
          str += '<a '+this._getHandlerStr(1)+' title="'
            +this.lang.buttonTipBeforeText + '1' + this.lang.buttonTipAfterText+'">1</a>';
          str += '<a '+this._getHandlerStr(2)+' title="'
            +this.lang.buttonTipBeforeText + '2' + this.lang.buttonTipAfterText +'">2</a>';
          str += dot;
          var begin = this.pno - 2;
          var end = this.pno + 2;
          if(end > this.total){
            end = this.total;
            begin = end - 4;
            if(this.pno - begin < 2){
              begin = begin-1;
            }
          }else if(end + 1 == this.total){
            end = this.total;
          }
          for(var i=begin;i<=end;i++){
            if(this.pno == i){
              str += '<span class="curr">'+i+'</span>';
            }else{
              str += '<a '+this._getHandlerStr(i)+' title="'
                +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
            }
          }
          if(end != this.total){
            str += dot;
          }
        }
      }
      var pagerHtml = '<div>';
      if(this.isWrapedPageBtns){
        pagerHtml += '<span class="pageBtnWrap">' + str_first + str_prv + str + str_next + str_last + '</span>'
      }else{
        pagerHtml += str_first + str_prv + str + str_next + str_last;
      }
      if(this.isWrapedInfoTextAndGoPageBtn){
        pagerHtml += '<span class="infoTextAndGoPageBtnWrap">' + total_info + gopage_info + '</span>';
      }else{
        pagerHtml += total_info + gopage_info;
      }
      pagerHtml += '</div><div style="clear:both;"></div>';
      $("#"+this.pagerid).html(pagerHtml);
    },
    //         
    init : function(config){
      this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno);
      this.total = isNaN(config.total) ? 1 : parseInt(config.total);
      this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords);
      if(config.pagerid){this.pagerid = config.pagerid;}
      if(config.mode){this.mode = config.mode;}
      if(config.gopageWrapId){this.gopageWrapId = config.gopageWrapId;}
      if(config.gopageButtonId){this.gopageButtonId = config.gopageButtonId;}
      if(config.gopageTextboxId){this.gopageTextboxId = config.gopageTextboxId;}
      if(config.isShowFirstPageBtn != undefined){this.isShowFirstPageBtn=config.isShowFirstPageBtn;}
      if(config.isShowLastPageBtn != undefined){this.isShowLastPageBtn=config.isShowLastPageBtn;}
      if(config.isShowPrePageBtn != undefined){this.isShowPrePageBtn=config.isShowPrePageBtn;}
      if(config.isShowNextPageBtn != undefined){this.isShowNextPageBtn=config.isShowNextPageBtn;}
      if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;}
      if(config.isShowCurrPage != undefined){this.isShowCurrPage=config.isShowCurrPage;}
      if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;}
      if(config.isWrapedPageBtns){this.isWrapedPageBtns=config.isWrapedPageBtns;}
      if(config.isWrapedInfoTextAndGoPageBtn){this.isWrapedInfoTextAndGoPageBtn=config.isWrapedInfoTextAndGoPageBtn;}
      if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;}
      if(config.lang){
        for(var key in config.lang){
          this.lang[key] = config.lang[key];
        }
      }
      this.hrefFormer = config.hrefFormer || '';
      this.hrefLatter = config.hrefLatter || '';
      if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;}
      if(config.click && typeof(config.click) == 'function'){this.click = config.click;}
      if(config.getHref && typeof(config.getHref) == 'function'){this.getHref = config.getHref;}
      if(!this._config){
        this._config = config;
      }
      //validate
      if(this.pno < 1) this.pno = 1;
      this.total = (this.total <= 1) ? 1: this.total;
      if(this.pno > this.total) this.pno = this.total;
      this.prv = (this.pno<=2) ? 1 : (this.pno-1);
      this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1);
      this.hasPrv = (this.pno > 1);
      this.hasNext = (this.pno < this.total);
      this.inited = true;
    },
    _getHandlerStr : function(n){
      if(this.mode == 'click'){
        return 'href="'+this.getHref(n)+'" rel="external nofollow" onclick="return kkpager._clickHandler('+n+')"';
      }
      //link  ,     
      return 'href="'+this.getLink(n)+'" rel="external nofollow" ';
    },
    _clickHandler  : function(n){
      var res = false;
      if(this.click && typeof this.click == 'function'){
        res = this.click.call(this,n) || false;
      }
      return res;
    }
};
다음은 플러그 인 kkpagerblue.css 코드:

#kkpager{
  clear:both;
  color:#999;
  padding:5px 0px 5px 0px;
  font-size:13px;
}
#kkpager a{
  float: left;
  border: 1px solid #ccc;
  display: inline;
  padding: 3px 10px 3px 10px;
  margin-right: 5px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
  background: #fff;
  text-decoration:none;
  color:#999;
}
#kkpager span.disabled{
  float: left;
  display: inline;
  padding: 3px 10px 3px 10px;
  margin-right: 5px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border:1px solid #DFDFDF;
  background-color:#FFF;
  color:#DFDFDF;
}
#kkpager span.curr{
  float: left;
  border: 1px solid #31ACE2;
  display: inline;
  padding: 3px 10px 3px 10px;
  margin-right: 5px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #F0FDFF;
  color: #31ACE2;
}
#kkpager a:hover{
  border:1px solid #31ACE2; 
  background-color:#31ACE2; 
  color:#fff;
}
#kkpager span.normalsize{
}
#kkpager_gopage_wrap{
  position:relative;
  left:0px;
  top:0px;
}
#kkpager_btn_go {
  width:44px;
  height:18px;
  border:0px;
  overflow:hidden;
  line-height:140%;
  padding:0px;
  margin:0px;
  text-align:center;
  cursor:pointer;
  background-color:#31ACE2;
  color:#FFF;
  position:absolute;
  left:0px;
  top:-2px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  display:none;
}
#kkpager_btn_go_input{
  width:36px;
  height:14px;
  color:#999;
  text-align:center;
  margin-left:1px;
  margin-right:1px;
  border:1px solid #DFDFDF;
  position:relative;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  left:0px;
  top:0px;
  outline:none;
}
#kkpager_btn_go_input.focus{
  border-color:#31ACE2;
}
#kkpager .pageBtnWrap{
  float:left;
}
#kkpager .infoTextAndGoPageBtnWrap{
  float:right;
}
#kkpager .spanDot{
  float:left;
  margin-right:5px;
}
#kkpager .currPageNum{
  color:#FD7F4D;
}
#kkpager .infoTextAndGoPageBtnWrap{
  padding-top:5px;
}
총결산
위 에서 말 한 것 은 소 편 이 소개 한 jQuery Ajax 가 페이지 별 kkpager 플러그 인 을 실현 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

좋은 웹페이지 즐겨찾기