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 相关文章推荐
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 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权重计算方法代码分享
2014/01/09 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php处理复杂xml数据示例
2016/07/11 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
php接口隔离原则实例分析
2019/11/11 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
python解包概念及实例
2021/02/17 Python
英国比较机场停车场网站:Airport Parking Essentials
2019/12/01 全球购物
面试求职的个人自我评价
2013/11/16 职场文书
业绩考核岗位职责
2014/02/01 职场文书
美术学专业求职信
2014/07/23 职场文书
依法行政工作汇报
2014/10/28 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
内勤岗位职责
2015/02/10 职场文书
小学安全工作总结2015
2015/05/18 职场文书
读书笔记怎么写
2015/07/01 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android