Ajax+js+dom+json+php+mysql实现仿google的超强分页、隔行变色效果

最新推荐文章于 2021-04-01 01:00:58 发布
最新推荐文章于 2021-04-01 01:00:58 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 代码再现 文章标签： mysql json ajax google php javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo1354691371/article/details/7326720
版权
 

 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>实现超强仿google分页效果</title>

<head>

<style type="text/css">

#tab{

       margin:auto auto;

       border-collapse:collapse;

        

       }

#content{

       width:750px;

        

       background-color:#3C9;

       border:1px dashed;}

#pageNum{

       width:750px;

       text-align:center;

       height:20px;

       background-color: #CF3;

       border:1px dashed;}

      

</style>

<script language="javascript" type="text/javascript" src="../../../include/ajaxUtil.js"></script>

<script language="javascript" type="text/javascript" src="../../../include/Interlaces.js"></script>

<link type="text/css" rel="stylesheet" href="../../../include/Interlaces.css">

<script language="javascript" type="text/javascript">

//------------显示页码部分开始-------//

     var nowPage=1;

        

        var endPage=<?php echo $Pages;?>;

        var pages=<?php echo $Pages;?>;

function  initPages(){

       var startPage=1;

        if(pages>11){

                if(nowPage-10>0){

                       startPage=nowPage-10;

                      

                       }else{

                       startPage=1;

                              }

                if(nowPage+9<pages){

                       endPage=nowPage+9;

                      

                       }else{

                       endPage=pages; 

                              }

               }

               var pageNumstr="";

              //判断上一页

              if(nowPage!=1){

                     pageNumstr+="<a href='javascript:getPageDatas("+(nowPage-1)+")'>上一页</a>";

                     }

               

        for(var i=startPage;i<=endPage;i++){

          if(nowPage==i){

              pageNumstr+="&nbsp;<b><font color='red'>"+i+"</font></b>";

              }else{

              pageNumstr+="&nbsp;<a href='javascript:getPageDatas("+i+")'>"+i+"</a>";   

                     }    

               }

               if(nowPage<pages){

                     pageNumstr+="<a href='javascript:getPageDatas("+(nowPage+1)+")'>下一页</a>";

                     }

        $$("pageNum").innerHTML=pageNumstr;

        //判断下一页

      

               

 

}

 

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

//------------显示正文开始部分-------//

 

function getPageDatas(np){

        

         var url="paging-goole.php";

         var params="np="+np;

         //进行ajax请求

         get(url,params,processPageDatas);

       }

  

function processPageDatas(xhr){

               

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

          //将当前页重新赋,服务器端返回的是字符转值

        nowPage=parseInt(obj.np);

         initPages();

          //获取查询结果

         var rows=obj.pageDatas;

        

         var pageStr="<table id='Interlaces_tab'>";

              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;

         Interlaces();

        

       }

//------------显示正文部分结束-------

//------------显示隔行变色效果-------//

function gehang(){}

//------------显示隔行变色结束-------

</script>

</head>

 

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

<table id="tab">

  <tr>

    <td>

     <div id="content"></div>

    </td>

  </tr>

  <tr>

    <td><div id="pageNum"></div></td>

  </tr>

</table>

 

</body>

</head>

paging-goole.php

<?php 

header("Content-Type:text/html;charset=utf-8"); 

include "../../../include/dbConn.php";

//接收客户端传过来的数据 np 

$np=$_GET['np']; 

//$sql="selsec * from area";

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

 

$rs=mysql_query($sql); 

//$arr="";

 

//便利度去每一行数据  

while($rows=mysql_fetch_assoc($rs)){ 

   $arr[]=$rows;

     

}

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

 //将数组转化成json对象    

  echo json_encode($arr2);   

    

?> 

将CSS、隔行变色封装成两个文件

Interlaces.js

function Interlaces(){

         

        

       //获取所有的tr

       var  Interlaces_tab=document.getElementById("Interlaces_tab");

       var trlist=Interlaces_tab.getElementsByTagName("tr");

      

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

       //进行判断

       if(i%2==0){

              trlist[i].className="two";

              }else{

                     trlist[i].className="one";

                     }

                     var oldcolor;  

              //当鼠标移动到该行，改行颜色加深

              trlist[i].οnmοuseοver=function(){

                     oldcolor=this.className;

                     //重新设定新的颜色

                     this.className="over";

                     }

                     trlist[i].οnmοuseοut=function(){

                            //当鼠标移开，自动还原颜色

                            this.className=oldcolor;

                     }

              }

       }

      

       var color="";

       function over(trNode){

              //把原来的颜色，先另存为

              color=trNode.className;

              //将当前行颜色设定为over

              trNode.className="over"

              }

//当鼠标离开的时候，我们原来的行的颜色设定回来

function out(trNode){

              //将当前行颜色设定为color

              trNode.className=color;

              }

Interlaces.css

.top{

       background-color:#C06;

       color:#0F0;

}

table{

        width:750px;

       border-collapse:collapse;

       border:1px #CF3 dashed;

       }

       td,th{

              border:#30C 1px solid;

       }

       .one{

              background-color:#0CF;

       }

       .two{

              background-color:#C0F;

       }

       .over{

              background-color:#63F;

       }

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

实现效果：

duoduo220
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
php对json数据分页,php处理分页数据并返回json
weixin_32306771的博客
04-02 122
header(‘content-type:application/json;charset=utf-8‘);//设置浏览器解析格式为jsonheader(‘Access-Control-Allow-Origin: *‘);$curPage = $_GET[‘page‘];//前台传递的当前页$pageSize = 20;//页容量大小$start = ($curPage - 1) * $pageS...
php分页json,php 分页 json
weixin_33954881的博客
04-10 255
场景：请教PHP生成JSON分页有关问题请问PHP生成JSON分页问题最近在搞生成PHP生成JSON，想实现分页，下边代码已能把数组生成了，分页要怎实现了？想实现每10条分一次页//connectioninformation$host="XXX";$user="XXX";$password="XX";$database="XX";//makeconnection$server...
json 分页 php,php+ajax+json实现分页
weixin_30990821的博客
03-10 248
分页的原理就不讲了，把数据库中的数据用一定的方法分为一段一段来显示，这个应该大家都知道。分页有很多方法，说说我学习分页的过程吧。我在刚开始学做开发的时候，第一次做是弄个新闻系统，不知道从×××了一本不知道有多垃圾的参考书(全书实例那种，只要把代码抄一遍，就可以出东西的那种，不知道自己当时怎么想的)，把所有的数据取出来，然后逐个逐个排一下，前十个放第一页，再十个放第二而……然后呢，多添几条数据，这个...
mysql+php+ajax实现分页查询（JSON拼接）
spfLinux的博客
11-12 1003
前端： common.js function $(id) { return document.getElementById(id); } function createXhr(){ var xhr; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{
jq.ajax+php+mysql实现分页显示数据
12-21
总结来说，实现“jq.ajax+php+mysql实现分页显示数据”的过程主要包括：前端使用jQuery的AJAX发送请求，PHP后端处理请求并从MySQL数据库获取分页数据，再将数据转化为JSON返回给前端，前端解析JSON并动态更新页面。...
Ajax+jsp+MySQL实现动态树形菜单
最新发布
01-25
本项目利用Ajax、jsp和MySQL技术来实现这种功能，提供了异步数据加载和交互的能力，极大地提升了用户体验。 首先，我们需要了解Ajax（Asynchronous JavaScript and XML），它是一种在不重新加载整个网页的情况下...
php+mysql+ajax实例
01-19
它通过JavaScript改变DOM（Document Object Model）结构，实现局部刷新，提高用户体验。AJAX并不直接涉及XML，现在更多的是使用JSON格式传输数据。 5. **jQuery简化AJAX** 为了简化AJAX操作，开发者通常会使用...
jQuery+Ajax+PHP+Mysql实现分页显示数据
11-06
首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及Ajax交互等任务。在分页显示数据的过程中，jQuery主要用于处理用户交互，如点击分页按钮，触发Ajax请求。 Ajax（Asynchronous JavaScript and...
jq.ajax+php+mysql实现瀑布流缓冲加载数据
12-23
在前端，JavaScript接收到JSON数据后，需要解析这些数据并创建新的DOM元素来呈现内容。瀑布流的实现通常需要计算每列的高度，确保新元素能够正确地填充空白位置。这可能涉及到对窗口大小变化的监听，以便动态调整...
php加载和生成json和生成xml文件,并带有ajax分页效果,带图带数据库
02-28
php生成json和生成xml文件,并带有ajax分页效果,带图带数据库 thinkphp仿百度分页+分页样式,纯属手工源码分享,php+jquery
PHP实现数据分页显示的简单实例
10-22
下面小编就为大家带来一篇PHP实现数据分页显示的简单实例。小编觉得挺不错的，现在就分享给大家，也给的大家做个参考。一起跟随小编过来看看吧
php处理分页数据并返回json
冷月心的博客
02-15 1917
php处理分页数据并返回json
php+ajax+json实现分页
weixin_33736048的博客
10-06 325
在web开发，尤其是内容站的开发，分页总是一个说不完道不尽的话题。分页到好坏也直接关系到我们网站能否有一个好的用户体验。尤其在显示大量数据，一个高效的分页方法直接关系到网站的访问速速。 分页的原理就不讲了，把数据库中的数据用一定的方法分为一段一段来显示，这个应该大家都知道。分页有很多方法，说说我学习分页的过程吧。 我在刚开始学做开发的时候，第一次做是弄个新闻系统，不...
php将json分页,JavaScript_javascript实现json页面分页实例代码，下午有个朋友问json 数据怎么 - phpStudy...
weixin_32273747的博客
04-01 183
javascript实现json页面分页实例代码下午有个朋友问json 数据怎么分页 就捣鼓了一个东东出来下面直接代码：无标题文档var a={"code":1,"list":[{"category1_id":"1","category1_name":"\u9152\u6c34\u996e\u6599","category1_intro":"\u6e05\u51c9\u53ef\u53e3\u76...
PHP+Ajax+JSON实现页面无刷新分页内容显示
PHP学习日志——地雷
06-03 2536
数据库创建以及测试数据插入示例：create table goods( goods_id int unsigned not null primary key auto_increment, goods_name varchar(32) not null, market_price float not null ); insert into goods values(null, '测试1', ...
两种方式实现省市县三级联动（利用解析文本和json方式）
03-05 4252
第一种： ajax-text-select.html 解析文本实现多级联动效果   var objectId="";   function getArea(id,objid){          objectId=objid;          var url="ajax-text-select-server.php";          var params
【JavaScript源代码】jquery+Ajax实现简单分页条效果.docx
12-29
JavaScript实现简单分页条效果 **概述** 本文分享了使用 jQuery 和 Ajax 实现简单分页条效果的代码，供大家参考。分页条是 Web 开发中常用的功能，通过异步 Ajax 方式实现，可以提高用户体验。 **知识点** ### 1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值