代码片段一：
代码片段二：
$(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);
}
//----<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>部分 <a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>片段二 开始----
kkpager.total = totalPage;
kkpager.totalRecords = totalRecords;
kkpager.generPageHtml({
pno: pageNo,//总<a href="https://www.jb51.cc/tag/yema/" target="_blank" class="keywords">页码</a>
total: totalPage,//总数据条数
totalRecords: totalRecords,//mode: 'click',//<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>前部
hrefFormer: pagehref,//<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>尾部
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;
}
}
});
//----<a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a>部分 <a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>片段二 结束----
//----<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>遮罩 开始----
$('#AjaxLoading').hide()
$(".show<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>").stop(true).animate({ 'margin-top': '250px','opacity': '0' },400);
$(".overlay").css({ 'display': 'none','opacity': '0' });
//----<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>遮罩 结束----
}
},error: function () {
alert("请刷新后重试！")
}
});
}
LoadingGoods();//加载商品列表
//----<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>数据加载 并绑定<a href="https://www.jb51.cc/tag/shengcheng/" target="_blank" class="keywords">生成</a><a href="https://www.jb51.cc/tag/fenye/" target="_blank" class="keywords">分页</a> 结束---- }
代码片段三：
下面这段代码：在原版上修改过，由于ajax分页不能及时更新总页数
页码
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 = '';
}else{
str_first = '';
}
}
if(this.isShowPrePageBtn){
if(this.hasPrv){
str_prv = '';
}else{
str_prv = '';
}
}
if(this.isShowNextPageBtn){
if(this.hasNext){
str_next = '';
}else{
str_next = '';
}
}
if(this.isShowLastPageBtn){
if(this.hasNext){
str_last = '';
}else{
str_last = '';
}
}
var str = '';
var dot = '';
var total_info='';
if(this.isShowCurrPage){
total_info += this.lang.currPageBeforeText + '' + this.lang.currPageAfterText;
if(this.isShowTotalPage){
total_info += total_info_splitstr;
total_info += this.lang.totalPageBeforeText + '' + this.lang.totalPageAfterText;
}else if(this.isShowTotalRecords){
total_info += total_info_splitstr;
total_info += this.lang.totalRecordsBeforeText + '' + this.lang.totalRecordsAfterText;
}
}else if(this.isShowTotalPage){
total_info += this.lang.totalPageBeforeText + '' + this.lang.totalPageAfterText;;
if(this.isShowTotalRecords){
total_info += total_info_splitstr;
total_info += this.lang.totalRecordsBeforeText + '' + this.lang.totalRecordsAfterText;
}
}else if(this.isShowTotalRecords){
total_info += this.lang.totalRecordsBeforeText + '' + this.lang.totalRecordsAfterText;
}
total_info += '';
var gopage_info = '';
if(this.isGoPage){
gopage_info = 'Box">'+this.lang.gopageBeforeText+''+
''+this.lang.gopageAfterText+'';
}
//分页处理
if(this.total <= 8){
for(var i=1;i<=this.total;i++){
if(this.pno == i){
str += '';
}else{
str += '';
}
}
}else{
if(this.pno <= 5){
for(var i=1;i<=7;i++){
if(this.pno == i){
str += '';
}else{
str += '';
}
}
str += dot;
}else{
str += '';
str += '';
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 += '';
}else{
str += '';
}
}
if(end != this.total){
str += dot;
}
}
}
var pagerHtml = '
';
if(this.isWrapedPageBtns){
pagerHtml += ''
}else{
pagerHtml += str_first + str_prv + str + str_next + str_last;
}
if(this.isWrapedInfoTextAndGoPageBtn){
pagerHtml += '';
}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;
}
};
总结
以上所述是小编给大家介绍的jQuery Ajax 实现分页 kkpager插件。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/ajax/37249.html