<?php
include "./include/dbConn.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>Ajax+js+dom+php+mysql实现仿百度、google的超强分页效果</title>
<script language="javascript" type="text/javascript" src="./include/ajaxUtil.js">
</script>
<style>
#tab{
margin:auto auto;
border-collapse:collapse;
}
#content{
height:400px;
width:750px;
background-color:#FCF;
border:1px dashed #6FF;
}
#pageNum{
height:20px;
text-align:center;
width:750px;
background-color:#CCC;
border:1px dashed #6FF;
}
</style>
<script language="javascript" type="text/javascript">
//-------------------显示页码部分开始-----------
function initPages(){
/*做几件事情
1、定义当前页 解决在javascript使用PHP中定义的变量?
2、定义开始页
3、定义最终页(结束页)
4、定义总页数
*/
//1、定义当前页 解决在javascript使用PHP中定义的变量?
var nowPage=<?php echo $nowPage; ?>
//定义开始页
var startPage=1;
//定义结束页
var endPage=<?php echo $Pages; ?>
//定义一个总页数
var pages=<?php echo $Pages; ?>
//当总页数大于11的时候,设定起始页和结束页
if(pages>11){
//要设定起始页码
if(nowPage-10>0){
//如果当前页-10>0则设置起始页=当前也-10设置,古设置startPage=1
startPage=nowPage-10;
}
//设定结束页
if(nowPage+9<pages){
//如果当前页+9>总页数,则设定结束页为当前页+9 否则设定结束页等于总页数
endPage=nowPage+9;
}else{
endPage=pages;
}
}
var pageNumStr="";
//判断什么时候显示上一页
if(nowPage!=1){
pageNumStr+="<a href='paging.php?np="+(nowPage-1)+"'>上一页</a>";
}
//for循环读出页码
for(var i=startPage;i<=endPage;i++){
//判断是否当前页,如果是当前页,让该页码加粗
if(nowPage==i){
//如果当前页,则加粗显示
pageNumStr+=" <b><font color='red'>"+i+"</font></b>";;
}else{
pageNumStr+=" <a href='Paging.php?np="+i+"'>"+i+"</a>";
}
}
//判断什么时候显示下一页
if(nowPage<pages){
pageNumStr+="<a href='paging.php?np="+(nowPage+1)+"'>下一页</a>";
}
$$("pageNum").innerHTML=pageNumStr;
}
</script>
</head>
<body οnlοad="initPages()">
<table id="tab" width="300" border="1" cellpadding="0">
<caption>Ajax+js+dom+php+mysql实现仿百度、google的超强分页效果</caption>
<tr>
<td>
<div id="content"></div>
</td>
</tr>
<tr>
<td>
<div id="pageNum"></div>
</td>
</tr>
</table>
</body>
</html>