javascript分页实现
虽然一直想写篇关于javascript分页的博客，但是忍了很久都没写。因为个人觉得功能还有些不完善，而且涉及到的东西也比较多，一时又难以讲清楚。但自己又想把自己领悟到的东西写下来，不然万一以后再遇见此类情况时，又得从得再来，那就太麻烦了，所以还是决定把它记录下来。
还是先上个图吧，只看文字理论太枯燥：



也不准备一一讲解怎么做的了，基本上注释里面写得比较清楚了，大体说下需要实现的功能吧。
1.数字页的显示问题。这个是问题的核心，单击不同页时会显示离此页最近的几页出来。
2.数字页跳转。
3.数据奇偶行样式。
4.是否需要复选框选项。
5.载入数据时显示进度条

大体功能就是这些，涉及到的东西点多，图片、CSS、JSP等都有所涉及，虽然此分页框架看起来还算可以，但使用起来并不轻松，基本上得明白所有过程。而且需要根据不同的需求进行不断调整，主要JS就是一个：

function GreenPager(actionPath, params) {
	///定义一全局变量,因为分页条那里会使用此变量
	greenPager = {};//寄生构造模式(Parasitic Constructor Pattern) 
	greenPager.currentPage = 1; ///当前页号
	greenPager.pageCount = 1; ///页总数量
	greenPager.pageSize = 15; ///每页显示数量
	//中间显示的数字页的数量
	greenPager.pageAmount = 3;
	greenPager.actionPath = actionPath;
	///额外的参数
	greenPager.params = params;
	//默认不显示checkbox
	greenPager.checkboxEnable = false;
	greenPager.setCheckboxEnable = function(enable) {
		greenPager.checkboxEnable = enable;
	}
	greenPager.go = function(pageNum) {
		//进度条
		if($("#green_pageTable").height()!=0){
			$("#green_loadMaskDiv").height($("#green_pageTable").height());
			$("#green_loadMaskDiv").width($("#green_pageTable").width());
		}else{
			$("#green_loadMaskDiv").height(340);
			$("#green_loadMaskDiv").width(500);
		}
		if(pageNum < 1){
				pageNum = 1;
			}else if(pageNum >= this.pageCount){
				pageNum = this.pageCount;
			}
  			var greenPager = this;
  			
  			//分页需要用到的参数及一些查询条件
  			var pageParams = {'currentPage':pageNum,'pageSize':this.pageSize};
  			
  			//将params参数放入分页参数中一起提交
  			if(greenPager.params != undefined){
	  			for(var key in greenPager.params){
	  				pageParams[key] = greenPager.params[key];
	  			}
  			}
  			
   			$.ajax({
   				type: "get",
   				url: this.actionPath,
   				data: pageParams,
   				cache: false,
   				success: function(data){
   					data = jQuery.parseJSON(data);
  					//设置当前页数
  					greenPager.currentPage = pageNum;
  					greenPager.pageCount = data.pageCount;
				
					/* 回调 */
  					greenPager.render(data);
  					greenPager.googlePage();
  				},
  			  beforeSend: function(){
  			  	$("#green_pageTable").hide();
  			  	$("#green_loadMaskDiv").fadeIn(60);
  			  },
  			  complete: function(){
  			  	$("#green_loadMaskDiv").fadeOut(60);
  			  	$("#green_pageTable").show();
  			  }
  			});
	};
	
	greenPager.start = function(){
		this.go(this.currentPage);
	};
	
	greenPager.googlePage = function(){ //谷歌式分页 用来控制数字页及...的显示
		var spanPage="";
	
		/*----------------显示上一页-----------------*/
		if(greenPager.currentPage==1){
			spanPage=spanPage+"<span class='disabled'>? 上一页</span>";
		}else{
			spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+(greenPager.currentPage-1)+")'>? 上一页</a>";
		}
	
		//只有一页
		if(greenPager.pageCount==1){
			spanPage=spanPage+"<span class='current'>1</span>";
		}else if(greenPager.pageCount < greenPager.pageAmount){//页数小于数字显示页数
			for(var i=0;i<greenPager.pageAmount;i++){
				if(greenPager.currentPage==i){
        			spanPage=spanPage+"<span class='current'>"+i+"</span>";
        		}else{
					spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+i+")'>"+(i+1)+"</a>";
				}
			}
		}else{
			//默认始终会显示前面两页，即1,2页
			for(var i=1;i<=2;i++){
				if(greenPager.currentPage==i){
        			spanPage=spanPage+"<span class='current'>"+i+"</span>";
        		}else{
					spanPage=spanPage+"<a class='green_googlePageNum' hidefocus='true' href='javascript:greenPager.go("+i+")'>"+i+"</a>";
				}
			}
		
			/*------------------ 下面这段代码是重点 ---------------------*/
		
			//从第3页开始显示
			var page_start=3;
			//至倒数第3页结束
			var page_end=greenPager.pageCount-3
			var v = (greenPager.currentPage - greenPager.pageAmount) > (page_start-1