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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery轮播图功能制作方法详解
Dec 03 jQuery
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
jQuery实现滑动开关效果
Aug 02 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设计模式 Builder(建造者模式)
2011/06/26 PHP
php实现分页工具类分享
2014/01/09 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
Javascript !!的作用
2008/12/04 Javascript
js/html光标定位的实现代码
2013/09/23 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
Vue3+elementui plus创建项目的方法
2020/12/01 Vue.js
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
详解django中使用定时任务的方法
2018/09/27 Python
python使用zip将list转为json的方法
2018/12/31 Python
python实现文件的备份流程详解
2019/06/18 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python实现宿舍管理系统
2019/11/22 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
python生成word合同的实例方法
2021/01/12 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
党员组织关系介绍信
2014/02/13 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
出国留学单位推荐信
2015/03/26 职场文书
干部外出学习心得体会
2016/01/18 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
Python编程super应用场景及示例解析
2021/10/05 Python