google分页效果

最新推荐文章于 2024-09-15 00:20:13 发布

Sword_A

最新推荐文章于 2024-09-15 00:20:13 发布

阅读量875

点赞数

文章标签： google ajax xmlhttprequest function 引擎 url

本文链接：https://blog.csdn.net/yuluo727282752/article/details/7322571

版权

<?php
include "./include.php";
/*
当前页	总页数	每页大小
*/

//定义当前页
if(isset($_GET['np'])){
$nowPage=$_GET['np'];
}else{
	$nowPage=1;
}

//查询数据库，得到总的记录数
$rs=mysql_query("select count(*) from area;");
$rowNum=mysql_result($rs,0);

//总页数上取整(总记录数/每面的大小)
$Pages=ceil($rowNum/$F_PAGESIZE);


?>

<!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>仿google分页</title>
<script type="text/javascript" language="JavaScript" src="ajaxUtil.js"></script>
<style type="text/css">
#tab{
	margin:auto;
	padding:auto;
	border-collapse:collapse;
}

#content{
	height:420px;
	width:600px;
	background-color:#FCF;
	border:1px dashed #C63;

}

#pageNum{
	height:20px;
	width:600px;
	background:#999;
	border:1px dashed #C63;
	text-align: center;
}


</style>

<script type="text/javascript" language="javascript">
//-----------------显示页面部分开始-----------------
function initPages(){
	/*
	1、定义当前页		解决在javascript中使用php中定义的变量
	2、定义开始页
	3、定义最终页(结束页
	4、定义总页数)
	*/	
	
	var nowPage=<?php echo $nowPage;  ?>;
	
	//定义开始页
	var startPage=1;
	//定义结束页
	var endPage=<?php echo $Pages;  ?>;
	
	//定义的一个总页数
	var pages=<?php echo $Pages;  ?>
	
	//当总页数大小于11时，设定起始页和结束页
	if(pages>6){
		//设定起始页码
		if(nowPage-5>0){
			//如果当前页-10>0则设置，当起始页=当前页-10
			startPage=nowPage-5;
		}
		
		//设定结束页
		if(nowPage+4<pages){
			//如果当前页+9>总页数,则设定结束页为		当前页+9 
			endPage=nowPage+4;
		}else{
			endPage=pages;	
		}
		
	}
	
	
	var pageNumStr="";
	//判断是否显示上一页
	if(nowPage!=1){
		pageNumStr+="<a href='ajax_google_page.php?np="+(nowPage-1)+"'>上一页</a>";		
		
	}
	
	
	
	
	//for循环读出页码
	for(var i=startPage;i<=endPage;i++){
		//判断是否是当前页，如果是当前页，让页码加粗
		if(nowPage==i){
			//如果当前页，则加粗
			pageNumStr+=" <b>"+i+"</b>";			
		}else{
			pageNumStr+=" <a href='ajax_google_page.php?np="+i+"'>"+i+"</a>";	
			
		}
		
	}
	
	if(nowPage!=pages){
		pageNumStr+="<a href='ajax_google_page.php?np="+(nowPage+1)+"'>下一页</a>";		
		
	}
	
	//将拼装的字符串显示到div中
	$("pageNum").innerHTML=pageNumStr;
	
	//显示数据
	getPageData(nowPage,"content");
		
}


//-----------------显示页面部分结束-----------------

//-----------------显示页面正文开始-----------------
function getPageData(nowPage,objid){
	objectId=objid;
	
	var url="ajax_google_server.php";
	
	var params="nowPage="+nowPage;
	
	get(url,params,processPageDatas);	
	
}

function processPageDatas(xhr){
	//获取显示信息胡位置(div)
	var selobj=$(objectId);
	
	var pageStr=xhr.responseText;
	//将数据写入div
	selobj.innerHTML=pageStr;
	
	
}


//-----------------显示页面正文结束-----------------



//-----------------表格隔行变色开始-----------------
function geHang(trr){
		
	trr.style.background="#C90";
	trr.onmouseout = function(){
		trr.style.background="#FCF";
		
	}
	
}


//-----------------表格隔行变色结束-----------------


</script>


</head>

<body οnlοad="initPages()">
<table id="tab">
  <tr>
    <td><div id="content"></div></td>
  </tr>
  <tr>
    <td><div id="pageNum"></div></td>
  </tr>
</table>
</body>
</html>

两个div用来显示内容和页数编号

内容是ajax获取的

<?php
header("Content-Type:text/html;charset=utf-8");
include_once "./include.php";
$nowPage=$_GET['nowPage'];

$sql="select id,name,code from area limit ".($nowPage-1)*$F_PAGESIZE.",".$F_PAGESIZE;

$rs=mysql_query($sql);

$str="<table border='1'><tr><th width='100px'>id</th><th width='400px'>名称</th><th width='100px'>编号</th></tr>";

while($rows=mysql_fetch_assoc($rs)){
	$str.="<tr onMouseMove='geHang(this)' class='odd'><td width='100px' align='center'>".$rows['id']."</td><td width='400px' align='center'>".$rows['name']."</td><td width='100px' align='center'>".$rows['code']."</td></tr>";		
	
}

	
	$str.="</table>";

	echo $str;
?>

使用的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);
}