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

代码片段一：

代码片段二：

代码片段三：

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

下面是插件kkpager.js代码：

/*
 kkpager V1.3
 https://github.com/pgkk/kkpager
 Copyright (c) 2013 [email protected]
 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 = ''+this.lang.firstPageText+'';
        }else{
          str_first = ''+this.lang.firstPageText+'';
        }
      }
      if(this.isShowPrePageBtn){
        if(this.hasPrv){
          str_prv = ''+this.lang.prePageText+'';
        }else{
          str_prv = ''+this.lang.prePageText+'';
        }
      }
      if(this.isShowNextPageBtn){
        if(this.hasNext){
          str_next = ''+this.lang.nextPageText+'';
        }else{
          str_next = ''+this.lang.nextPageText+'';
        }
      }
      if(this.isShowLastPageBtn){
        if(this.hasNext){
          str_last = ''+this.lang.lastPageText+'';
        }else{
          str_last = ''+this.lang.lastPageText+'';
        }
      }
      var str = '';
      var dot = '...';
      var total_info='';
      var total_info_splitstr = ''+this.lang.totalInfoSplitStr+'';
      if(this.isShowCurrPage){
        total_info += this.lang.currPageBeforeText + '' + this.pno + '' + this.lang.currPageAfterText;
        if(this.isShowTotalPage){
          total_info += total_info_splitstr;
          total_info += this.lang.totalPageBeforeText + ''+this.total + '' + this.lang.totalPageAfterText;
        }else if(this.isShowTotalRecords){
          total_info += total_info_splitstr;
          total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText;
        }
      }else if(this.isShowTotalPage){
        total_info += this.lang.totalPageBeforeText + ''+this.total + '' + this.lang.totalPageAfterText;;
        if(this.isShowTotalRecords){
          total_info += total_info_splitstr;
          total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText;
        }
      }else if(this.isShowTotalRecords){
        total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText;
      }
      total_info += '';
      var gopage_info = '';
      if(this.isGoPage){
        gopage_info = ''+this.lang.gopageBeforeText+''+
          ''+
          ''+this.lang.gopageAfterText+'';
      }
      //分页处理
      if(this.total <= 8){
        for(var i=1;i<=this.total;i++){
          if(this.pno == i){
            str += ''+i+'';
          }else{
            str += ''+i+'';
          }
        }
      }else{
        if(this.pno <= 5){
          for(var i=1;i<=7;i++){
            if(this.pno == i){
              str += ''+i+'';
            }else{
              str += ''+i+'';
            }
          }
          str += dot;
        }else{
          str += '1';
          str += '2';
          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 += ''+i+'';
            }else{
              str += ''+i+'';
            }
          }
          if(end != this.total){
            str += dot;
          }
        }
      }
      var pagerHtml = '
';
      if(this.isWrapedPageBtns){
        pagerHtml += '' + str_first + str_prv + str + str_next + str_last + ''
      }else{
        pagerHtml += str_first + str_prv + str + str_next + str_last;
      }
      if(this.isWrapedInfoTextAndGoPageBtn){
        pagerHtml += '' + total_info + gopage_info + '';
      }else{
        pagerHtml += total_info + gopage_info;
      }
      pagerHtml += '
';
      $("#"+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插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！