ajax案例-ajax+js+dom+json+php+mysql仿google分页1

最新推荐文章于 2019-07-17 12:27:55 发布

原创最新推荐文章于 2019-07-17 12:27:55 发布 · 758 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#google #mysql #php #ajax #json #javascript

本文详细介绍了如何使用 PHP 和 MySQL 实现类似百度、Google 的分页功能，包括页面跳转、页码显示及计算总页数等关键步骤。

<?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{
      height:400px;
      width:750px;
      background-color:#FCF;
      border:1px dashed #009;
      }
#pageNum{
      text-align:center;
      height:20px;
      width:750px;
      background-color:#999;
      border:1px dashed #009;
      }

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

//显示页码
function getPages(){
//1.定义当前页解决在JavaScript中使用PHP中定义的函数
var nowPage=<?php echo $nowPage;?>;
// 2、定义开始页
var startPage=1;

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

//4、定义总页数
var pages=<?php echo $Pages;?>;
//党总页数大于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='Paging.php?np="+(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='Paging.php?np="+i+"'>"+i+"</a>";
   }
}
//判断是否显示下一页
   if(nowPage<pages){
      pageNumStr+=" <a href='Paging.php?np="+(nowPage+1)+"'>下一页</a>";
   }

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

//_---------------------

//显示内容

</script>
</head>

<body onload="getPages()">

<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>