自己写的一个基于jquery的js+ajax分页控件,希望对大家有帮助!源代码及例子在附件中,欢迎大家下载并根据自己的需要修改。
/**
*container:div容器
*totalRecordCount:总记录条数
*pageSize:页面大小
*dataUrl:ajax请求路径
*callBack:ajax 回调函数
*/
function PageControl(container,totalRecordCount,pageSize,dataUrl,callBack){
this.pageSize = pageSize || 10;//页面大小
this.currentPage = 1;//当前页,默认为1
this.totalRecordCount = totalRecordCount || 0;//总记录条数
this.dataUrl = dataUrl || "";
this.container = container;//装载分页控件的容器
this.pageCount = this.div(this.totalRecordCount,this.pageSize);
this.callBack = callBack;
}
PageControl.prototype = {
div:function(firstNum, secondNum){
var n1 = Math.round(firstNum);
var n2 = Math.round(secondNum);
var rslt = parseInt(n1 / n2);
var m = n1 % n2;
return m>0?rslt+1:rslt;
},
/**
* 跳转到某一页
*/
goToPage:function(pageNum){
this.currentPage = pageNum;
this.paint();
this.getAjax(pageNum,this);
},
/*
* 上一页
*/
prevPage:function(){
this.currentPage = this.currentPage<=1?1:this.currentPage-1;
this.goToPage(this.currentPage);
},
/**
* 下一页
*/
nextPage:function(){
this.currentPage = this.currentPage>=this.pageCount?this.pageCount:this.currentPage+1;
this.goToPage(this.currentPage);
},
getAjax:function(pagNum,instance){//调用jquery ajax get请求
if(this.dataUrl==="")return;
var str = (this.dataUrl.indexOf("?")>=0?"&":"?")+"pageSize="+this.pageSize+"&pageNum="+this.currentPage+"&r="+Math.random();
var url = this.dataUrl + str;
try{
$.get(url,function(data){
if(typeof(instance.callBack)!="undefined" && instance.callBack!=null ){
instance.callBack(data,instance);
}
});
}catch(e){
throw e;
}
},
paint:function(){
var strArr = [];
if(this.currentPage>1)
strArr.push("<div id='divPageControlPrev' class='page-control-forward'><a href='javascript:void(0);'>< Prev</a></div>");
var _t = 8;
var size = 5;
if(this.pageCount<=_t){
this.paintPart(1,this.pageCount,strArr);
}else{
var className = 1==this.currentPage?"page-control-pagenum-selected":"page-control-pagenum";
strArr.push("<div class='"+className+"'><a href='javascript:void(0);'>"+1+"</a></div>");
if(this.currentPage>=_t){
var t = (this.currentPage+size)>=this.pageCount?(this.pageCount-1):(this.currentPage+size);
strArr.push("<div class='page-control-split'>...</div>");
this.paintPart(this.currentPage - size,t,strArr);
if((this.currentPage+size) < this.pageCount-1)
strArr.push("<div class='page-control-split'>...</div>");
}else{
if(this.pageCount>=_t){
var t = (this.currentPage+size)>=this.pageCount?(this.pageCount-1):(this.currentPage+size);
this.paintPart(2,t,strArr);
if((this.currentPage+size) < this.pageCount-1)
strArr.push("<div class='page-control-split'>...</div>");
}else{
this.paintPart(2,this.pageCount-1,strArr);
}
}
var _temp = this.pageCount;
var className = _temp==this.currentPage?"page-control-pagenum-selected":"page-control-pagenum";
strArr.push("<div class='"+className+"'><a href='javascript:void(0);'>"+_temp+"</a></div>");
}
if(this.currentPage<this.pageCount)
strArr.push("<div id='divPageControlNext' class='page-control-forward'><a href='javascript:void(0);'>Next ></a></div>");
$(this.container).html(strArr.join(""));
this.bindEvents(this);
},
paintPart:function(start,end,arr){
for(var c = start;c<=end;c++){
var className = c==this.currentPage?"page-control-pagenum-selected":"page-control-pagenum";
arr.push("<div class='"+className+"'><a href='javascript:void(0);'>"+c+"</a></div>");
}
},
bindEvents:function(instance){//绑定事件
$("#divPageControlPrev").bind("click",function(){
instance.prevPage();
});
$("#divPageControlNext").bind("click",function(){
instance.nextPage();
});
$(".page-control-pagenum a").each(function(){
$(this).bind("click",function(){
var pageNum = parseInt($(this).html());
instance.goToPage(pageNum);
});
});
}
}