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

代码片段一：

 <!--分页组件 JS CSS 开始-->
 <!--分页组件 CSS-->
 <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" />
 <!--分页组件 JS-->
 <script type="text/javascript" src="https://www.gxlcms.com/resource/js/kkpager.min.js"></script>
 <script type="text/javascript" src="https://www.gxlcms.com/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分页不能及时更新总页数

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