仿google分页,隔行变色,ajax无刷新分页,完整版
来源:互联网 发布:免费数据库网站有哪些 编辑:程序博客网 时间:2024/06/05 01:07
直接贴图:
ajax.js
function get(url1,value,methodName){/*ajax无刷新的评论技术1、发布的评论要无刷新的显示到下边区域2、通过ajax把内容存到服务器上3、获取服务器的数据,显示到评论区*//*ajax基本的使用步骤1、初始化ajax引擎2、封装url(设定要请求的路径)3、打开ajax引擎(同步方式、异步方式)4、将要请求的信息发送到服务器进行处理5、监听服务器放回给ajax引擎的处理状态6、判断是否交互完毕,如果交互完毕则取出返回的数据*///使用ajax引擎var xhr = new XMLHttpRequest();//这种方式只针对ie浏览器,并且ie6一下还有问题。var url =url1+"?"+value+"&r="+Math.random();//alert(url);//打开引擎xhr.open("get",url,true); //readyState=1//发送请求xhr.send(null); //readyState=2//监听readyState值的改变,每次改变都会执行下面的函数xhr.onreadystatechange=function (){//如果等于4,表名交互完毕,我们可以取出服务器返回的内容if(xhr.readyState==4){methodName(xhr);}}}function $$(id){return document.getElementById(id);}
dbConn.php
<?php//简历数据库的链接mysql_connect("localhost","root","liuhaichuang");//选择数据库mysql_select_db("area");//设置字符集mysql_query("set names utf8");$F_PAGESIZE=15;?>
paging.php
<?phpinclude("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:440px;width:750px;background-color:#9FC;border:1px dashed;}#pageNum{height:20px;width:750px;background-color:#9FC;border:1px dashed;}td{width:250px;}.one {background-color: #F9C;}.two {background-color: #FCC;}</style><script language="javascript" type="text/javascript" src="ajax.js"></script><script language="javascript" type="text/javascript">//--------------------显示页码部分开始-----------/*做几件事情1、定义当前页 解决在javascript中使用php中定义的变量2、定义开始页3、定义最终页(结束页)4、定义总页数*///1、定义当前页 解决在javascript中使用php中定义的变量var nowPage=1;//2、定义开始页var startPage=1;//3、定义结束页var endPage=<?php echo $Pages;?>;//4、定义总页数var Pages=<?php echo $Pages;?>;function initPages(){//当总页数大于11的时候,设定起始页和结束页if(Pages>11){//要设定起始页if(nowPage-10>0){//如果当前页-10>0则设置起始页=当前页-10,否则不设置,startPage=1startPage=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+=" <font color='red'><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){startPage=1;var url="paging-server.php";var params="np="+np;//进行ajax请求get(url,params,processPageDatas);}function processPageDatas(xhr){//将json格式的字符串转化为对象var obj=eval("("+xhr.responseText+")");//alert(obj);//alert(xhr.responseText);//将当前页重新赋值,注意服务器返回的是字符串nowPage=parseInt(obj.np);initPages();//获取查询结果var pageDatas=obj.pageDatas;//遍历内容var pageStr="<table>";pageStr+="<tr><th>编号</th><th>名称</th><th>编码</th><th>拼音</th><th>拼音缩写</th></tr>"for(var i=0;i<pageDatas.length;i++){pageStr+="<tr><td>"+pageDatas[i].id+"</td><td>"+pageDatas[i].name+"</td><td>"+pageDatas[i].code+"</td><td>"+pageDatas[i].p+"</td><td>"+pageDatas[i].l+"</td></tr>";}pageStr+="</table>";//将表格显示到div id="content"中$$("content").innerHTML=pageStr;geHang();}//--------------------显示页面正文结束-----------//--------------------表格的隔行变色效果开始-----------function geHang(){//获取所有的trvar trlist = document.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].onmouseover = function() {oldcolor = this.className;this.className = "over";}trlist[i].onmouseout = function() {//当鼠标离开,自动还原原来的颜色this.className = oldcolor;}}}//--------------------表格的隔行变色效果结束-----------</script></head><body onload="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>
paging-server.php
<?phpheader("Content-Type:text/html;charset=utf-8");include("dbConn.php");//接受客户端传递来的数据$np = $_GET['np'];//定义sql语句$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);?>
源码下载:源码+数据库
- 仿google分页,隔行变色,ajax无刷新分页,完整版
- 使用ajax实现仿google分页并隔行变色
- Ajax+js+dom+json+php+mysql实现仿google的超强分页、隔行变色效果
- ajax+js+dom+json+php+mysql实现仿百度、google的分页隔行变色效果(加图片)
- [原创]终极分页:Ajax+Js+Dom+Json无刷新分页技术叫板另一篇仿百度、Google分页算法
- ajax 无刷新分页
- ajax无刷新分页
- Ajax无刷新分页
- ajax无刷新分页
- ajax无刷新分页
- ajax无刷新分页
- ajax无刷新分页
- Ajax无刷新分页
- AJAX无刷新分页
- ajax :分页无刷新
- 完整版仿google分页,已发
- ajax实现分页无刷新
- DataGrid无刷新分页(Ajax)
- android 开发中遇到的错误及解决方式(更新R.java文件不能自动更新问题)
- hadoop streaming用法注意
- 十道面试题
- 谈谈RTP传输中的负载类型和时间戳
- 江苏联通业务数据库实时复制应用--案例
- 仿google分页,隔行变色,ajax无刷新分页,完整版
- How to set Extjs Toolbar items' width to expand the whole 工具栏项的宽度设为百分比
- 如何解包/编辑/打包boot.img文件
- Magento调试模式配置
- 用IMAGE做提交按钮
- 实时传输协议RTP
- YUV422格式信号格式
- Android Contacts(一)—— 读取联系人
- JMS学习笔记