基于jquery的js+ajax分页控件

自己写的一个基于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);
    		});
    		
    	});
    	

    }
}

评论

1 楼 xxprcm 2013-01-31  

呵呵，沙发！