使用ajax实现仿google分页并隔行变色

ajax-lx-page.html： 
  
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>练习分页效果</title>
<script type="text/javascript" src="ajaxUtil.js"></script>
<style type="text/css">
 #d1{ 
	left:320px;
	top:0px;
	position:absolute;
	 }
 #content{
	 width:750px;
	
	 background-color:#F9F;
	 border:1px dashed #03F;
	 }

 #pageNum{
	width:750px; 
	
	 text-align:center;
	background-color:#999;
	border:1px dashed #03F;
	cursor:pointer;
	 }	 
 
.top{
	 
	 background-color:#6C3;
	 }
	 
.one{
	 
	 background-color:#6C9;
	 }
	 
.two{
	 
	 background-color:#FC3;
	 }	 	
 .over{
  background-color:#C39;  	
	} 
</style>
<script type="text/javascript">
  //进行分页判断
     
    function duan(canshu){
	 var xhr=new XMLHttpRequest(); 
	  if(isNaN(canshu)){	
             var url="ajax-lx-page.php?np="+1+"&r="+Math.random();	
	  }else{
		  var url="ajax-lx-page.php?np="+canshu+"&r="+Math.random();	
		   
    		  }
	  xhr.open("get",url,true); //状态1	 	 
	  xhr.send(null);//状态2	  
	  xhr.onreadystatechange=function (){		
		  if(xhr.readyState==4){
			  var text=xhr.responseText;
			  var arr=text.split("@");	

			 var qian=arr[0].split(";");
			  var hou=arr[1];
							  
			  var pages=parseInt(qian[0]);
			  var nowPage=parseInt(qian[1]);	
			
			 document.getElementById("content").innerHTML=hou;
			
			 changeColor();
			 
	//定义起始页	
		var startPage=1;
	  //定义结束页
	    var endPage=pages;
		
	  //定义当前页
	   // var nowPage=nowPage;		
	  //定义总页数
		//var pages=pages;
	  //进行判断 如果总页数大于11 
	    if(pages>11){
			//当前页-10大于0 起始值=当前页-10
			 if(nowPage-10>0){
				 startPage=nowPage-10;
				 }
			//判断当前值+9<pages时 最终值=当前值+9 否则最终值=总页数
			  if(nowPage+9<pages){
				  endPage=nowPage+9;
				  
				  }else{
					endPage=pages; 
							 
					  }
				}		 
			//进行循环
			 var pagestr="";
			 
			 //上一页
			   if(nowPage>1){
				  
				   var a=nowPage-1;
				   
				  // pagestr+="<a href='ajax-lx-page.php?np="+(nowPage-1)+"'>上一页</a>";
				   pagestr+="<a onclick=duan("+a+")>上一页</a>";
				   }
			   
			  //alert(startPage);
			  //alert(endPage);
			  for(var i=startPage;i<=endPage;i++){
				  
				  if(nowPage==i){
				    pagestr+=" <a onclick=duan("+i+")><b><font color='yellow'>"+i+"</font></b></a>";
					
				    }else{
				    pagestr+=" <a onclick=duan("+i+")>"+i+"</a>";
						}
				  }		  
				  			   			 
			//下一页
			   if(nowPage<pages){
				   var b=nowPage+1;
			
				   pagestr+="<a onclick=duan("+b+")>下一页</a>";
				   }
		  
		   document.getElementById("pageNum").innerHTML=pagestr;
			 	
			  }  
		  }  	  

		}
	
				
		
		
	//隔行变色	
    function changeColor(){		
		//var tab2=document.getElementById("tab2");
		var len=document.getElementsByTagName('tr');
		//alert(len.length);
		for(var i=1;i<len.length;i++){
			if(i%2==0){
				len[i].className="two";
				}else{
					len[i].className="one";
					}
			}	
		}		
  //鼠标点上去变色 鼠标移动到
  var color="";
     function colors(trNode){ 
		 color=trNode.className;
		 trNode.className="over";
		 }
	  //鼠标移走	 
      function out(trNode){ 
		 
		 trNode.className=color;
		 }		 
  
  
</script>
</head>

<body onload="duan();changeColor()">

<div id="d1"> 
     <b><h2 align="center">练习分页效果</h2></b>
   
      <div id="content">
     
    </div>
    <div id="pageNum"></div>
  
 </div>

</body>
</html>

 

 

 

 

 

 ajax-lx-page.php：

<?php
   include("../include/dbConn.php");
   /* 获取数据库数据  */
   //定义当前页
  if($_GET['np']){
	     $nowPage=$_GET['np'];
	  }else{
		 $nowPage=1; 
		  }
		 
  //定义一页显示记录数
   $f_pagesize=19;
   //获取总页数
   $sql="select count(*) from area";
   $qu=mysql_query($sql);
   $res=mysql_result($qu,0);
   $pages=ceil($res/$f_pagesize);
   $str.=$pages.";".$nowPage;
   //echo $str;
   
   //进行搜索
    function getsql($a){
		$mysql="select * from area";
		if($a){
			$mysql.=" where name like '$a%'";
			}
			return $mysql;
		}


  $sql=getsql($name);
  
  //判断是否点击了搜索
  $c=$sql.' limit '.($nowPage-1)*$f_pagesize.",".$f_pagesize;
  $rs=mysql_query($c);
  $str.="@<table border='1' align='center' width='100%'>";
  $str.="<tr><th>id</th><th>名称</th><th>拼音</th><th>编码</th><th>简称</th></tr>";
  while($rows=mysql_fetch_assoc($rs)){
	  
	  //$str.="<tr align='center'><td>""</td></tr>";
	  $str.="<tr align='center' onmouseover='colors(this)' onmouseout='out(this)'><td>".$rows['id']."</td><td>".$rows['name']."</td><td>".$rows['p']."</td><td>".$rows['code']."</td><td>".$rows['commend']."</td></tr>";
	 
	  }
  $str.="</table>";
  echo $str;
  
  
?>

 

ajaxUtil.js：

function get(url1,params,methodName){
  /*
 ajax使用的基本步骤：

 1、初始化ajax引擎
 2、封装url（设定要请求的路径）
 3、打开ajax引擎（同步方式、异步的方式；本次传输使用get还是post）
 4、将要请求的信息通过引擎发送到服务器进行处理
 5、监听服务器返回给ajax引擎的处理状态
 6、判断是否交互完毕，如果交互完毕则取出返回的数
  */	
  //初始化ajax引擎
  var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器，并且ie6以下还有问题。
  var url=url1+"?"+params+"&r="+Math.random();

  //alert(url);
  //打开引擎
  xhr.open("get",url,true);   //readyState=1
 
  //发送请求
  xhr.send(null);   //readyState=2
  
  //监听readyState值的改变，每次改变都会执行下面额函数  
  xhr.onreadystatechange=function (){
	  
	  //如果等于4，表明交互完毕 ，我们可以取出服务器返回的内容
	  if(xhr.readyState==4){
            
	//动态调用方法，为什么说是动态呢？方法的名称是个变量methodName
			methodName(xhr);
			
	  }
	  
  }

}

//$$（）方法用于方便取出 id="id" 的对象
function $$(id){
	
	return document.getElementById(id);
}