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+json+php+mysql实现仿百度、google的分页效果
< style>
#tab{
margin:auto auto;
border-collapse:collapse;
}
#content{
height:400px;
width:750px;
background-color:#CCCCCC;
border:1px dashed #CC0000;
}
#pageNum{
text-align:center;
height:20px;
width:750px;
background-color:#FFCCCC;
border:1px dashed #CC0000;
}
table{
width:750px;
padding:0;
margin:0;
}
td{
text-align:center;
}
.top{
background-color:#00FFFF;
color:#FFFFFF;}
table{
border:1px dashed #FFFF00;
border-collapse:collapse;}
th,td{
border:#999 1px solid;}
.one{
background-color:#999999;}
.two{
background-color:#FF66FF;}
.over{
background-color:#990000;}
< /style>
< script language="javascript" type="text/javascript" src="../../include/ajaxUtil.js">
< script language="javascript" type="text/javascript">
//------------显示页码开始
//1、定义当前页
var nowPage=1;
//定义结束页
var endPage=<?php echo $Pages;?>;
//定义总页数
var pages=<?php echo $Pages;?>;
function initPages(){
/*
1、定义当前页 解决在js中使用php中的变量
2、定义开始页
3、定义最终页(结束页)
4、定义总页数
*/
//定义开始页,定义成局部变量,主要是为了开始页码正常显示(大页码向小页码转)
var startPage=1;
//当总页数大于11的时候,设定其实页和结束页
if(pages>11){
//要设定起始页码
if(nowPage-10>0){
//如果当前页-10>0则设置起始页码=当前页-10
//否则不设置,不设置startPage=1
startPage=nowPage-10;
}
if(nowPage+9
//如果当前页+9
endPage=nowPage+9;
}else{
endPage=pages;
}
}
var pageNumStr="";
//判断什么时候显示上一页
if(nowPage!=1){
pageNumStr+="上一页";
}
//for循环读出页码
for(var i=startPage;i<=endPage;i++){
//判断是否是当前页,如果是当前页,让该页码加粗
if(nowPage==i){
//如果是当前页,则加粗显示
pageNumStr+=" "+i+"";
}else{
pageNumStr+=" "+i+"";
}
}
//判断什么时候显示下一页
if(nowPage
pageNumStr+="下一页";
}
//document.getElementById("pageNum").innerHTML=pageNumStr;
$$("pageNum").innerHTML=pageNumStr;
}
//------------显示页码结束
//-------------显示页面正文开始
function getPageDatas(np){
//根据页码进行ajax异步请求
var url="Paging-server.php";
var params="np="+np;
//进行ajax请求
get(url,params,proessPageDatas);
}
function proessPageDatas(xhr){
//alert(xhr.responseText);
var obj=eval("("+xhr.responseText+")");
//将当前也重新赋值,注意服务器端传回来的是字符串
nowPage=parseInt(obj.np);
initPages();
//获取查询结果
var rows=obj.pageDatas;
var pageStr="
pageStr+="
编号名称编码拼音拼音缩写";for(var i=0;i
pageStr+="
"+rows[i].id+""+rows[i].name+""+rows[i].code+""+rows[i].p+""+rows[i].l+"";}
pageStr+="
";//将表格显示到div id=content中
$$("content").innerHTML=pageStr;
changeColor();
}
//------------显示页面正文结束
function changeColor(){
var tab2=document.getElementById("tab2");
//获取tr对象
var tr=tab2.getElementsByTagName("tr");
//循环遍历tr对象
//标题行单独设色,因此tr的下标,即 i 从 1 开始循环
for(var i=1;i
//进行判断
if(i%2==0){
//设置偶数行的类名one
tr[i].className="one";
}else{
//设置奇数行的类名two
tr[i].className="two";
}
/*下面是鼠标经过的行背景加深*/
//定义一个变量,保存原来行的类名
var color="";
//当鼠标经过哪行,立即执行下面的函数
tr[i].οnmοuseοver=function (){
//将鼠标未在行上时行的原类名赋给color变量
color=this.className;
//当鼠标在tr上时,改变这个tr的类名
this.className="over";
}
//当鼠标离开哪行,立即执行下面的函数
tr[i].οnmοuseοut=function (){
//当鼠标离开tr时,将tr的类名还原为原来的类名
this.className=color;
}
}
}
< /script>
< /head>
< /table> < /body> < /html>