仿google分页，隔行变色，ajax无刷新分页，完整版

本文链接：https://blog.csdn.net/wxlhlh001/article/details/7328582

直接贴图：

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

<?php
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: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=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+=" <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(){
		//获取所有的tr
				var 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 ο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>

paging-server.php

<?php
header("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);
	
?>

源码下载：源码+数据库