検索

ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery は Ajax を使用してページング kkpager プラグインのサンプル コードを実装します

jQuery は Ajax を使用してページング kkpager プラグインのサンプル コードを実装します

黄舟
黄舟オリジナル
2017-08-11 13:55:371810ブラウズ

この記事では、サンプル コードを通じて 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(&#39;pno&#39;);
      if (!pageNo) {
        pageNo = 1;
      }
      //----分页部分 代码片段一 结束----
//----页面数据加载 并绑定生成分页 开始----
      function LoadingGoods() {     
     
        jQuery.ajax({
          url: &#39;baidu.com&#39;,
          type: "POST",
          dataType: "json",
          data: { &#39;参数1&#39;: 1, &#39;参数2&#39;: 2,&#39;Page&#39;: pageNo, &#39;Limit&#39;: 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 += "<p class=&#39;commodity&#39;></p>";
                }
                $(".commodity_volume").html(str);
              } else {
                $(".commodity_volume").html("");
                var str = "";
                str = "<p><center>没有查到您想要的数据。</center></p>"
                $(".commodity_volume").html(str);
              }
              //----分页部分 代码片段二 开始----
              kkpager.total = totalPage;
              kkpager.totalRecords = totalRecords;
              kkpager.generPageHtml({
                pno: pageNo,
                //总页码
                total: totalPage,
                //总数据条数
                totalRecords: totalRecords,
                //mode: &#39;click&#39;,
                //链接前部
                hrefFormer: pagehref,
                //链接尾部
                hrefLatter: &#39;&#39;,//hrefLatter: &#39;.html&#39;
                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(&#39;pno=&#39; + pno, &#39;pno=&#39; + n);
                  } else {
                    return url;
                  }
                }
              });
              //----分页部分 代码片段二 结束----
              //----显示遮罩 开始----
              $(&#39;#AjaxLoading&#39;).hide()
              $(".showbox").stop(true).animate({ &#39;margin-top&#39;: &#39;250px&#39;, &#39;opacity&#39;: &#39;0&#39; }, 400);
              $(".overlay").css({ &#39;display&#39;: &#39;none&#39;, &#39;opacity&#39;: &#39;0&#39; });
              //----显示遮罩 结束----
            }
          },
          error: function () {
            alert("请刷新后重试！")
          }
        });
      } 
      LoadingGoods();//加载商品列表
      //----页面数据加载 并绑定生成分页 结束---- 
}   </script>

コード スニペット 3 : 


 <p id="kkpager"></p>

次のコード: 元のバージョンから変更されました。Ajax ページングのため、合計ページ数を時間内に更新できません

以下は、プラグイン kkpager.js コードです: 


/*
 kkpager V1.3
 https://github.com/pgkk/kkpager
 Copyright (c) 2013 cqzhangkang@163.com
 Licensed under the GNU GENERAL PUBLIC LICENSE
*/
var kkpager = {
    pagerid       : &#39;kkpager&#39;, //pID
    mode        : &#39;link&#39;, //模式(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      : &#39;&#39;, //链接前部
    hrefLatter      : &#39;&#39;, //链接尾部
    gopageWrapId    : &#39;kkpager_gopage_wrap&#39;,
    gopageButtonId    : &#39;kkpager_btn_go&#39;,
    gopageTextboxId    : &#39;kkpager_btn_go_input&#39;,
    lang        : {
      firstPageText      : &#39;首页&#39;,
      firstPageTipText    : &#39;首页&#39;,
      lastPageText      : &#39;尾页&#39;,
      lastPageTipText      : &#39;尾页&#39;,
      prePageText        : &#39;上一页&#39;,
      prePageTipText      : &#39;上一页&#39;,
      nextPageText      : &#39;下一页&#39;,
      nextPageTipText      : &#39;下一页&#39;,
      totalPageBeforeText    : &#39;共&#39;,
      totalPageAfterText    : &#39;页&#39;,
      currPageBeforeText    : &#39;当前第&#39;,
      currPageAfterText    : &#39;页&#39;,
      totalInfoSplitStr    : &#39;/&#39;,
      totalRecordsBeforeText  : &#39;共&#39;,
      totalRecordsAfterText  : &#39;条数据&#39;,
      gopageBeforeText    : &#39; 转到&#39;,
      gopageButtonOkText    : &#39;确定&#39;,
      gopageAfterText      : &#39;页&#39;,
      buttonTipBeforeText    : &#39;第&#39;,
      buttonTipAfterText    : &#39;页&#39;
    },
    //链接算法（当处于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 + &#39;_&#39; + n + this.hrefLatter;
    },
    //页码单击事件处理函数（当处于mode模式）,参数n为页码
    click  : function(n){
      //这里自己实现
      //这里可以用this或者kkpager访问kkpager对象
      return false;
    },
    //获取href的值（当处于mode模式）,参数n为页码
    getHref  : function(n){
      //默认返回&#39;#&#39;
      return &#39;#&#39;;
    },
    //跳转框得到输入焦点时
    focus_gopage : function (){
      var btnGo = $(&#39;#&#39;+this.gopageButtonId);
      $(&#39;#&#39;+this.gopageTextboxId).attr(&#39;hideFocus&#39;,true);
      btnGo.show();
      btnGo.css(&#39;left&#39;,&#39;10px&#39;);
      $(&#39;#&#39;+this.gopageTextboxId).addClass(&#39;focus&#39;);
      btnGo.animate({left: &#39;+=30&#39;}, 50);
    },
    //跳转框失去输入焦点时
    blur_gopage : function(){
      var _this = this;
      setTimeout(function(){
        var btnGo = $(&#39;#&#39;+_this.gopageButtonId);
        btnGo.animate({
          left: &#39;-=25&#39;
         }, 100, function(){
           btnGo.hide();
           $(&#39;#&#39;+_this.gopageTextboxId).removeClass(&#39;focus&#39;);
         });
      },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 = $(&#39;#&#39;+this.gopageTextboxId).val();
      if(isNaN(str_page)){
        $(&#39;#&#39;+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 == &#39;click&#39;){
        this._clickHandler(n);
      }else{
        window.location = this.getLink(n);
      }
    },
    //不刷新页面直接手动调用选中某一页码
    selectPage : function(n){
      this._config[&#39;pno&#39;] = 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=&#39;&#39;,str_prv=&#39;&#39;,str_next=&#39;&#39;,str_last=&#39;&#39;;
      if(this.isShowFirstPageBtn){
        if(this.hasPrv){
          str_first = &#39;<a &#39;+this._getHandlerStr(1)+&#39; title="&#39;
            +(this.lang.firstPageTipText || this.lang.firstPageText)+&#39;">&#39;+this.lang.firstPageText+&#39;</a>&#39;;
        }else{
          str_first = &#39;<span class="disabled">&#39;+this.lang.firstPageText+&#39;</span>&#39;;
        }
      }
      if(this.isShowPrePageBtn){
        if(this.hasPrv){
          str_prv = &#39;<a &#39;+this._getHandlerStr(this.prv)+&#39; title="&#39;
            +(this.lang.prePageTipText || this.lang.prePageText)+&#39;">&#39;+this.lang.prePageText+&#39;</a>&#39;;
        }else{
          str_prv = &#39;<span class="disabled">&#39;+this.lang.prePageText+&#39;</span>&#39;;
        }
      }
      if(this.isShowNextPageBtn){
        if(this.hasNext){
          str_next = &#39;<a &#39;+this._getHandlerStr(this.next)+&#39; title="&#39;
            +(this.lang.nextPageTipText || this.lang.nextPageText)+&#39;">&#39;+this.lang.nextPageText+&#39;</a>&#39;;
        }else{
          str_next = &#39;<span class="disabled">&#39;+this.lang.nextPageText+&#39;</span>&#39;;
        }
      }
      if(this.isShowLastPageBtn){
        if(this.hasNext){
          str_last = &#39;<a &#39;+this._getHandlerStr(this.total)+&#39; title="&#39;
            +(this.lang.lastPageTipText || this.lang.lastPageText)+&#39;">&#39;+this.lang.lastPageText+&#39;</a>&#39;;
        }else{
          str_last = &#39;<span class="disabled">&#39;+this.lang.lastPageText+&#39;</span>&#39;;
        }
      }
      var str = &#39;&#39;;
      var dot = &#39;<span class="spanDot">...</span>&#39;;
      var total_info=&#39;<span class="totalText">&#39;;
      var total_info_splitstr = &#39;<span class="totalInfoSplitStr">&#39;+this.lang.totalInfoSplitStr+&#39;</span>&#39;;
      if(this.isShowCurrPage){
        total_info += this.lang.currPageBeforeText + &#39;<span class="currPageNum">&#39; + this.pno + &#39;</span>&#39; + this.lang.currPageAfterText;
        if(this.isShowTotalPage){
          total_info += total_info_splitstr;
          total_info += this.lang.totalPageBeforeText + &#39;<span class="totalPageNum">&#39;+this.total + &#39;</span>&#39; + this.lang.totalPageAfterText;
        }else if(this.isShowTotalRecords){
          total_info += total_info_splitstr;
          total_info += this.lang.totalRecordsBeforeText + &#39;<span class="totalRecordNum">&#39;+this.totalRecords + &#39;</span>&#39; + this.lang.totalRecordsAfterText;
        }
      }else if(this.isShowTotalPage){
        total_info += this.lang.totalPageBeforeText + &#39;<span class="totalPageNum">&#39;+this.total + &#39;</span>&#39; + this.lang.totalPageAfterText;;
        if(this.isShowTotalRecords){
          total_info += total_info_splitstr;
          total_info += this.lang.totalRecordsBeforeText + &#39;<span class="totalRecordNum">&#39;+this.totalRecords + &#39;</span>&#39; + this.lang.totalRecordsAfterText;
        }
      }else if(this.isShowTotalRecords){
        total_info += this.lang.totalRecordsBeforeText + &#39;<span class="totalRecordNum">&#39;+this.totalRecords + &#39;</span>&#39; + this.lang.totalRecordsAfterText;
      }
      total_info += &#39;</span>&#39;;
      var gopage_info = &#39;&#39;;
      if(this.isGoPage){
        gopage_info = &#39;<span class="goPageBox">&#39;+this.lang.gopageBeforeText+&#39;<span id="&#39;+this.gopageWrapId+&#39;">&#39;+
          &#39;<input type="button" id="&#39;+this.gopageButtonId+&#39;" onclick="kkpager.gopage()" value="&#39;
            +this.lang.gopageButtonOkText+&#39;" />&#39;+
          &#39;<input type="text" id="&#39;+this.gopageTextboxId+&#39;" onfocus="kkpager.focus_gopage()" onkeypress="return kkpager.keypress_gopage(event);"  onblur="kkpager.blur_gopage()" value="&#39;+this.next+&#39;" /></span>&#39;+this.lang.gopageAfterText+&#39;</span>&#39;;
      }
      //分页处理
      if(this.total <= 8){
        for(var i=1;i<=this.total;i++){
          if(this.pno == i){
            str += &#39;<span class="curr">&#39;+i+&#39;</span>&#39;;
          }else{
            str += &#39;<a &#39;+this._getHandlerStr(i)+&#39; title="&#39;
              +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+&#39;">&#39;+i+&#39;</a>&#39;;
          }
        }
      }else{
        if(this.pno <= 5){
          for(var i=1;i<=7;i++){
            if(this.pno == i){
              str += &#39;<span class="curr">&#39;+i+&#39;</span>&#39;;
            }else{
              str += &#39;<a &#39;+this._getHandlerStr(i)+&#39; title="&#39;+
                this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+&#39;">&#39;+i+&#39;</a>&#39;;
            }
          }
          str += dot;
        }else{
          str += &#39;<a &#39;+this._getHandlerStr(1)+&#39; title="&#39;
            +this.lang.buttonTipBeforeText + &#39;1&#39; + this.lang.buttonTipAfterText+&#39;">1</a>&#39;;
          str += &#39;<a &#39;+this._getHandlerStr(2)+&#39; title="&#39;
            +this.lang.buttonTipBeforeText + &#39;2&#39; + this.lang.buttonTipAfterText +&#39;">2</a>&#39;;
          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 += &#39;<span class="curr">&#39;+i+&#39;</span>&#39;;
            }else{
              str += &#39;<a &#39;+this._getHandlerStr(i)+&#39; title="&#39;
                +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+&#39;">&#39;+i+&#39;</a>&#39;;
            }
          }
          if(end != this.total){
            str += dot;
          }
        }
      }
      var pagerHtml = &#39;<p>&#39;;
      if(this.isWrapedPageBtns){
        pagerHtml += &#39;<span class="pageBtnWrap">&#39; + str_first + str_prv + str + str_next + str_last + &#39;</span>&#39;
      }else{
        pagerHtml += str_first + str_prv + str + str_next + str_last;
      }
      if(this.isWrapedInfoTextAndGoPageBtn){
        pagerHtml += &#39;<span class="infoTextAndGoPageBtnWrap">&#39; + total_info + gopage_info + &#39;</span>&#39;;
      }else{
        pagerHtml += total_info + gopage_info;
      }
      pagerHtml += &#39;</p><p style="clear:both;"></p>&#39;;
      $("#"+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 || &#39;&#39;;
      this.hrefLatter = config.hrefLatter || &#39;&#39;;
      if(config.getLink && typeof(config.getLink) == &#39;function&#39;){this.getLink = config.getLink;}
      if(config.click && typeof(config.click) == &#39;function&#39;){this.click = config.click;}
      if(config.getHref && typeof(config.getHref) == &#39;function&#39;){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 == &#39;click&#39;){
        return &#39;href="&#39;+this.getHref(n)+&#39;" rel="external nofollow" onclick="return kkpager._clickHandler(&#39;+n+&#39;)"&#39;;
      }
      //link模式，也是默认的
      return &#39;href="&#39;+this.getLink(n)+&#39;" rel="external nofollow" &#39;;
    },
    _clickHandler  : function(n){
      var res = false;
      if(this.click && typeof this.click == &#39;function&#39;){
        res = this.click.call(this,n) || false;
      }
      return res;
    }
};

以下はプラグインkkpager_blueの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 プラグインのサンプル コードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：フロントエンドルーティングを実装するためのreact-routerの使用方法の詳細な説明次の記事：フロントエンドルーティングを実装するためのreact-routerの使用方法の詳細な説明

関連記事

続きを見る