本文通过实例代码给大家讲解了jquery ajax 实现分页 kkpager插件功能，需要的的朋友参考下吧

代码片段一：

 <!--分页组件 JS CSS 开始-->  <!--分页组件 CSS-->  <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" />  <!--分页组件 JS-->  <ｓｃｒｉｐｔ type="text/javascript" src="/resource/js/kkpager.min.js"></ｓｃｒｉｐｔ>  <ｓｃｒｉｐｔ type="text/javascript" src="/resource/js/kkpager.js"></ｓｃｒｉｐｔ>   <!--分页组件 JS CSS 结束-->

代码片段二：

<ｓｃｒｉｐｔ 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.ｒｅｐｌａｃｅ(&#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();//加载商品列表      //----页面数据加载 并绑定生成分页 结束---- }   </ｓｃｒｉｐｔ>

代码片段三：

 <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;      //ｄｅｌｅｔｅ 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;}

总结