代码片段一：
<!--分页组件 JS CSS 开始--> <!--分页组件 CSS--> <link type="text/css" href="/resource/css/kkpager_blue.css" rel="external nofollow" rel="stylesheet" /> <!--分页组件 JS--> <script type="text/javascript" src="/UploadFiles/2021-04-02/kkpager.min.js">代码片段二：
<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) "'+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插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“jQuery Ajax 实现分页 kkpager插件实例代码”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。