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 οnclick=duan("+a+")>上一页</a>";
}
//alert(startPage);
//alert(endPage);
for(var i=startPage;i<=endPage;i++){
if(nowPage==i){
pagestr+=" <a οnclick=duan("+i+")><b><font color='yellow'>"+i+"</font></b></a>";
}else{
pagestr+=" <a οnclick=duan("+i+")>"+i+"</a>";
}
}
//下一页
if(nowPage<pages){
var b=nowPage+1;
pagestr+="<a οnclick=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 οnlοad="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' οnmοuseοver='colors(this)' οnmοuseοut='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);
}