jQuery Ajax 实现分页 kkpager插件实例代码
程序员文章站
2023-02-23 23:09:41
代码片段一：
代码片段一：
<!--分页组件 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分页不能及时更新总页数
下面是插件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插件，希望对大家有所帮助