<?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);
}