一个不成熟的ajax分页

function gettNames(){
	var size=$("#tth thead th").size();
	var tNames=new Array;
	for(var i=1;i<size-1;i=i+1)
		tNames[i-1]=$("#tth thead th:eq("+i+")").attr("tName")
	return tNames;
}

function gettNamesSize(){
	var size=$("#tth thead th").size();
	var tNamesSize=new Array;
	for(var i=0;i<size;i=i+1)
		tNamesSize[i]=$("#tth thead th:eq("+i+")").attr("width")
	return tNamesSize;
}

/*
 * 分页函数
 * page 请求的页面
 * rows 每页记录数
 * queryStr 被查找的字符串
 * colStr 被查找的字段,为空则查找所有的字段
 * who 分页的对象,就是struts-config.xml 配置的path(无'/')
 * return tbody里的数据,以及对这些数据操作的功能,最后一定要加上(return ;),否则会重复的调用getDate()方法
 */

function getDate(page,rows,queryStr,colStr,who){
	if(who=="" || who=="undefined"){
		alert("请在参数中添加要查找的对象名称");
		return ;
	}
	//请求数据的地址
	var url="../"+who+".do?page="+page+"&rows="+rows;
	if(queryStr!="" || queryStr!="undefined")
		url=url+"&queryStr="+queryStr;
	if(colStr!="" || colStr!="undefined")
		url=url+"&colStr="+colStr;
	//将地址统一转成ISO,在服务端在统一转回UTF-8(汉字在不同浏览器中编码不同,若不统一编码地址,则在服务器无法解析多种编码同时共存的情况)
	url=encodeURI(url);
	//ajax前,使背景变灰等待,阻止用户进一步操作
	$(".mask").css("display","block").css("width","100%").css("height","100%");
	$(".mask-msg").css("display","block").css("top","49%").css("left","44%");
	
	$.post(url,null,function(date){
		var objs=eval(date);
		if(objs=="") {
			$("#tDate").append("<tr><td colspan=7>没有记录~</td></tr>");
			total=0;
			return ;
		}
     	$("#tDate tr").remove();
     	//表的第一列显示行号
     	var lineNum=1;
     	//表的第一列显示背景色为标题栏颜色
     	var lineCSS=0;
     	//得到thead th 中定义的所有tName,用户获取json数据,为obj对象的下标
     	var tName=gettNames();
     	var tNameSize=gettNamesSize();
     	for(var i in objs){
     		var obj=objs[i];
     		//存储每行的信息
     		var outPut="";
     		//隔行换色
     		if(lineNum%2==0)
     			outPut+="<tr class=alt><td>"+lineNum+"</td>"
     		else
     			outPut+="<tr><td>"+lineNum+"</td>"
     		//由tName作为下标获取obj中的json数据存储到各数据列中
     		for(var t=0;t<tName.length;t=t+1){
     			outPut+="<td width='"+tNameSize[t+1]+"'>"+obj[tName[t]]+"</td>";
     		}
     		//定义操作,此处可能对函数的兼容性有破坏性
     		outPut+="<td width='"+tNameSize[tNameSize.length-1]+"'><div align=center><a href=# onclick=openWin('../"+who+".do?command=updateDetail&num="+obj[tName[0]]+"','updateReport',500,300);>详细</a>"
				+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=# onclick=del('../"+who+".do?command=del"+who+"&num="+obj[tName[0]]+"');>删除</a>"
				+"&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<a href=# onclick=openWin('../"+who+".do?command=updateInput&num="+obj[tName[0]]+"','update"+who+"',500,300);>修改</a></div></td></tr>";

     		$("#tDate").append(outPut);
     		
     		//取得有json传递的总记录数,此obj.total将改变index.jsp页面上的变量total的值
     		if(lineNum==1)
     			total=obj.total;
     		//首列标题色
     		$("tbody tr td:eq("+lineCSS+")").css("background","#F0F0F0").css("text-align","center").css("width",tNameSize[0]);
     		//行数自曾
     		lineNum=lineNum+1;
     		//跳到下一行的首列
     		lineCSS=lineCSS+tName.length+2;
     	}
		
    	$("#tDate tr:odd").mouseover(function(){
			$(this).removeClass("alt");
			$(this).addClass("over");
		}).click(function(){
			$(this).removeClass("alt");
			if($(this).attr("class").indexOf("beClick")==-1){
				$(this).addClass("beClick");
			}else{
				$(this).removeClass("beClick");
				$(this).addClass("alt");
			}
		});
		$("#tDate tr:odd").mouseout(function(){
			if($(this).attr("class").indexOf("beClick")==-1){
				$(this).removeClass("over");
				$(this).addClass("alt");
			}
		});
		
		$("#tDate tr:even").mouseover(function(){
			$(this).addClass("over");
		}).click(function(){
			if($(this).attr("class").indexOf("over")!=-1)
				$(this).removeClass("over");
			if($(this).attr("class")=="beClick")
				$(this).removeClass("beClick");
			else
				$(this).addClass("beClick");
		});
		$("#tDate tr:even").mouseout(function(){
			$(this).removeClass("over");
		});
		
		//总页数
		if(total%rows==0)
			totalPage=parseInt(total/rows);
		else
			totalPage=parseInt(total/rows)+1;
		
		//设置index.jsp页面相应地点的值
		$("#pageNum").val(page);
    	$("#fromNum").html((page-1)*rows);
		$("#toNum").html(page*rows);
    	$("#totalNum").html(total);
   	 	$("#totalPage").html(totalPage);
		$(".mask").css("display","none");
		$(".mask-msg").css("display","none");
	});
	//(重要!)否则当点击下一页或上一页按钮时,页面会级数的执行,由1-2-4-8
	return ;
}

//响应用户请求函数,不放到getDate()中主要是因为放入则出错,具体原因和表现,忘了
function opt(page,rows,queryStr,colStr,who){
	//设置跳转到目的页
	$("#pageNum").keyup(function(event){
		var keycode=event.which;
		if(keycode==13){
			setPage=parseInt($(this).val());
			if(setPage==page)
				return ;
			if(setPage>totalPage)
				page=totalPage;
			else
				page=setPage;
			getDate(page,rows,queryStr,colStr,who);
		}
	});
	
	$("#reloadPage").click(function(){
	 	getDate(page,rows,queryStr,colStr,who);
	});
	
	$("#nextPage").click(function(){
		if(page==totalPage)
			return ;
		page=page+1;
		getDate(page,rows,queryStr,colStr,who);
	});
	
	$("#prevPage").click(function(){
		if(page==1)
			return ;
		page=page-1;
		getDate(page,rows,queryStr,colStr,who);
	});
	
	$("#lastPage").click(function(){
		if(page==totalPage)
			return ;
		page=totalPage;
		getDate(page,rows,queryStr,colStr,who);
	});
	
	$("#firstPage").click(function(){
		if(page==1)
			return ;
		page=1;
		getDate(page,rows,queryStr,colStr,who);
	});
	
	$("#setRows").change(function(){
		rows=parseInt($(this).val());
		page=1;
		getDate(page,rows,queryStr,colStr,who);
	});
	
	$("#SIMsearch").click(function(){
		queryStr=$("#SearchStr").val();
		colStr=$("#listColumn").val();
		page=1;
		getDate(page,rows,queryStr,colStr,who);
	});
	
	$("#SearchStr").keyup(function(event){
		var keycode=event.which;
		if(keycode==13){
			$("#SIMsearch").click();
		}
	});
	
	$("#addBut").click(function(){
		openWin("/test2/"+who+"/add.jsp","add"+who,500,300);
	});
	
	getDate(page,rows,queryStr,colStr,who);
}
 表头固定后,在chrome中内容部显示有滚动条时,内容被挤压,在IE下,由于本人烂css原因,本来就存在无法100%width的BUG,可是滚动条刚好暂用空白部分,显示的还算可以过的去

你可能感兴趣的:(Ajax,json,jsp,css,chrome)