欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-26 08:16:04
代码片段一:

代码片段一:

 <!--分页组件 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插件,希望对大家有所帮助