仿google分页

最新推荐文章于 2024-07-23 11:32:13 发布

甜心

最新推荐文章于 2024-07-23 11:32:13 发布

阅读量267

点赞数

文章标签： google javascript stylesheet mysql sql json

paging.php

<?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+mysal实现仿百度、Google的超强分页</title>
<style>
#tab{
margin:auto auto;
border-collapse:collapse;
}
#content{

width:750px;
background-color:#FCF;
border:1px dashed #009;
}
#Interlaces_tab{
width:750px;
}
#pageNum{
text-align:center;
height:20px;
width:750px;
background-color:#999;
border:1px dashed #009;
}
.top{
background-color:#F00;
color:#006;
}

</style>
<script language="javascript" type="application/javascript" src="../include/ajaxUtil.js"></script>
<script language="javascript" type="application/javascript" src="../include/Interlaces.js"> </script>
<link type="text/css" rel="stylesheet" href="../include/Interlaces.css" />
<script language="javascript" type="application/javascript">
/*
1.定义当前页解决在JavaScript中使用PHP中定义的函数
2、定义开始页
3、定义最终页（结束页）
4、定义总页数
*/

//1.定义当前页解决在JavaScript中使用PHP中定义的函数
var nowPage=1;

//3、定义最终页（结束页）
var endPage=<?php echo $Pages;?>;

//4、定义总页数
var pages=<?php echo $Pages;?>;

//显示页码
function initPages(){
// 2、定义开始页 ,定义成局部变量主要是为了开始页码正常显示（大页面跳小页码）
var startPage=1;

//党总页数大于11 设置起始页和结束页
if(pages>11){
// 设置起始页
if(nowPage-10>0){
startPage=nowPage-10;
//如果当前页-10>0则设置起始页=当前页-10，否则不设置； startPage=1;
}
//设置结束页
if(nowPage+9<pages){
//如果当前页+9<总页数,则设定终止页+9，否则不予设定，等于总页数
endPage=nowPage+9;
}else{
//结束页=总页数
endPage=pages;
}
}

var pageNumStr="";
//判断是否显示上一页
if(nowPage!=1){
pageNumStr+=" <a href='javascript:getPageDatas("+(nowPage-1)+")'>上一页</a>";
}

//for 循环读出页码
for(var i=startPage;i<endPage;i++){
//判断是否是当前页，如果是当前页，让该页码加粗
if(nowPage==i){
//如果是当前页，加粗显示
pageNumStr+=" <font color='yellow'><b>"+i+"</b></font>";
}else{
pageNumStr+=" <a href='javascript:getPageDatas("+i+")'>"+i+"</a>";
}
}
//判断是否显示下一页
if(nowPage<pages){
pageNumStr+=" <a href='javascript:getPageDatas("+(nowPage+1)+")'>下一页</a>";
}

$$("pageNum").innerHTML=pageNumStr;
}

//_-------------显示页码部分结束--------

//显示页面正文内容---------------------------

function getPageDatas(np){
//根据页码进行ajax异步请求
var url="Paging-server.php";
var params="np="+np;
//进行ajax请求
get(url,params,processPageDates);

}

function processPageDates(xhr){
//将json格式的字符串转换为对象
//dalert(xhr.responseText);
var obj=eval("("+xhr.responseText+")");

//将当前页重新赋值 ,注意服务器端返回的是字符串
nowPage=parseInt(obj.np);
initPages();

//获取查询结果
var rows=obj.pageDatas;

var pageStr="<table id='Interlaces_tab'>";
pageStr+="<tr class='top'><th>编号</th><th>名称</th><th>编码</th><th>拼音</th><th>拼音缩写</th></tr>";
for(var i=0;i<rows.length;i++){
pageStr+="<tr><td>"+rows[i].id+"</td><td>"+rows[i].name+"</td><td>"+rows[i].code+"</td><td>"+rows[i].p+"</td><td>"+rows[i].l+"</td></tr>"
}

pageStr+="</table>";

//将表格显示到div content中
$$("content").innerHTML=pageStr;
//----隔行变色效果
Interlaces();

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

</script>
</head>

<body οnlοad="getPageDatas(1)">

<table id="tab">
<caption>ajax+js+dom+php+mysal实现仿百度、Google的超强分页</caption>
<tr>
<td>
<div id="content"></div>
</td>
<tr>
<tr>
<td>
<div id="pageNum"></div>
</td>
<tr>

</table>
</body>

</html>

------------------------------

Paging-server.php

<?php
header("Content-Type:text/html;charset=utf-8");
//包含数据库连接
include_once "../include/dbConn.php";

//接收客户端传来的数据 np
$np=$_GET['np'];

//定义sql
$sql ="select id,name,code,p,l from area limit ".($np-1)*$F_PAGESIZE.",".$F_PAGESIZE;
//执行sql
$rs=mysql_query($sql);
//echo $sql;
$arr2=array();

//遍历读取每行数据

while($rows=mysql_fetch_assoc($rs)){
$arr[]=$rows;
}
$arr2=array("np"=>$np,"pageDatas"=>$arr);
//将数组转换成json对象（格式的字符串）
echo json_encode($arr2);

?>

甜心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿google分页

paging.phpinclude "../include/dbConn.php";/*几个关键的变量：当前页，总页数，每页大小*///定义当前页if(isset($_GET['np'])){$nowPage=$_GET['np'];}else{$nowPage=1; }//查询数据库，得到总记录数$rs=mysql_quer
复制链接

扫一扫