Ajax+js+dom+json+php+mysql实现仿百度、google超强分页效果

最新推荐文章于 2024-07-22 14:36:59 发布

honey_tao

最新推荐文章于 2024-07-22 14:36:59 发布

阅读量791

点赞数

文章标签： mysql ajax google json 百度 php

本文链接：https://blog.csdn.net/honey_th/article/details/7327334

版权

<?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+json+php+mysql实现仿百度、google超强分页效果</title>
<style>
#tab{
margin:auto auto;
border-collapse:collapse;
}
#content{
height:450px;
width:700px;
background-color:#FC9;

border:1px dashed #0F9;}
#PageNum{
height:25px;
text-align:center;
width:800px;
background-color:#FF3;
border:1px dashed #333;}
#table1{
width:550px;
height:450px;
border:1px #693 dashed;
border-collapse:collapse;}

</style>

//显示页面部分开始
function initpages(){
   /*做几件事情解决在javascript中使用php中定义的变量
    1、定义当前页
    2、定义开始页
    3、定义结束页
    4、定义总页数
   */

// 2、定义开始页主要为了开始页码正常显示（大页码向小页码转换）,
var startPage=1;
//当页数大于11的时候，设定起始页和结束页
      if(pages>11){

   //设定起始页页码
   if(nowPage-10>0){
    //如果当前页》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='javascript:getPageDatas("+(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='javascript:getPageDatas("+i+")'>"+i+"</a>";
       }
    // alert(pageNumStr);

    }

     //判断时候显示下一页

    if(nowPage<pages){
   pageNumStr+=" <a href='javascript:getPageDatas("+(nowPage+1)+")'>下一页</a>";
     }

        //将拼装的字符串显示到div
   $$("PageNum").innerHTML=pageNumStr;

   }

//显示页面部分结束

//显示页面正文开始

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

    }

function processPageDatas(xhr){

  //alert(xhr.responseText);
   var obj=eval("("+xhr.responseText+")");

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

     initpages();

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

var pageStr="<table border='1' id='table1'>";

      pageStr+="<tr><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").innerHTML=pageStr;

}

//显示页面正文结束

//表格的隔行变色开始
function Interlaces(){
//获取所有tr
var interlaces_tab=document.getElementById(
"interlaces_tab");
var trlist=interlaces_tab.getElementsByTagName("tr");

   for(var i=1li<trlist.length;i++){

    //进行判断
    if(i%2==0){

     trlist[i].className="two";

     }else(

      trlist[i].className="one";

     )

    var oldcolor;
    }

}

//表格隔行变色结束

</script>

</head>

<body οnlοad="getPageDatas(1)">
<table id="tab">
<caption>Ajax+js+dom+json+php+mysql实现仿百度、google超强分页效果</caption>
<tr>
    <td>
      <div id="content"></div>
    </td>
</tr>

<tr>
    <td>
     <div id="PageNum"></div>

    </td>
</tr>

</table>

</body>
</html>

php文件

<?php
header("Content-Type:text/html;charset=utf-8");
include "./include/dbConn.php";

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

$sql="select id,name,code,p,l from area limit ".($np-1)*$F_PAGESIZE.",".$F_PAGESIZE;

//执行查询
$rs=mysql_query($sql);

$arr2=array();
//遍历读取每行数据
while($rows=mysql_fetch_assoc($rs)){

$arr[]=$rows;
}

$arr2=array("np"=>$np,"pageDatas"=>$arr);

//将数组转化成json对象（格式字符串）

echo json_encode($arr2);

honey_tao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax+js+dom+json+php+mysql实现仿百度、google超强分页效果

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

扫一扫