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

来源：互联网发布：沈阳淘车网络骗局编辑：程序博客网时间：2024/06/05 11:12

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){            //动态调用方法，为什么说是动态呢？方法的名称是个变量methodNamemethodName(xhr);  }    }}//$$（）方法用于方便取出 id="id" 的对象function $$(id){return document.getElementById(id);}