jQuery Ajax 实现分页 kkpager插件实例代码


Posted in jQuery onAugust 10, 2017

代码片段一:

<!--分页组件 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 结束-->

代码片段二:

<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>

代码片段三:

<div id="kkpager"></div>

下面这段代码:在原版上修改过,由于ajax分页不能及时更新总页数

jQuery Ajax 实现分页 kkpager插件实例代码

下面是插件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       : '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    : ' 转到',
      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;
    }
};

下面是插件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插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery初级教程之网站品牌列表效果
Aug 02 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 #jQuery
jquery对table做排序操作的实例演示
Aug 10 #jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
Aug 09 #jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 #jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 #jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 #jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
You might like
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
vue 自定义提示框(Toast)组件的实现代码
2018/08/17 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
python多进程操作实例
2014/11/21 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
详解利用python识别图片中的条码(pyzbar)及条码图片矫正和增强
2020/11/17 Python
html5菜单折纸效果
2014/04/22 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
公司端午节活动方案
2014/02/04 职场文书
个人近期表现材料
2014/02/11 职场文书
三查三看党性分析材料
2014/02/18 职场文书
电焊工岗位职责
2014/03/06 职场文书
干部下基层实施方案
2014/03/14 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL