Ajax实现数据分页功能

在平时网页中看电影的时候经常能够注意到就是在看电影的时候，底部有对电影的评论，点击评论分页的下一页没有重新刷新页面，这时候用到的则是Ajax异步刷新。这对于用户体验有所提高，因为要是电影看到一半点击评论的下一页，整个页面立马生效，这时候电影又重新加载，且不就打击用户么。下面用Ajax实现无刷新数据分页功能。此时借用的是Smarty+MySQL+Ajax实现

首先设计数据库中表的字段

create table category(
id int primary key auto_increment,name varchar(20),content varchar(20),cid int);

这时候要用到上一篇文章中的Ajax框架封装的函数。

(function(){
     //获取一个dom元素
	var $=function(id){
		return document.getElementById(id);
	};
	
	//获取一个Ajax对象
	$.init=function(){
		try {return new XMLHttpRequest()} catch(e){}
		try {return new ActiveXObject('Microsoft.XMLHTTP')} catch(e){}
		alert('Error');
	};
	
	//用于发送Ajax的get请求
	$.get=function(url,data,callback,type){
		var xhr=$.init();
		if(data!=null){
			url=url+'?'+data;
		}
		xhr.open('get',url);
		xhr.setRequestHeader("If-Modified-Since","0");
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4 && xhr.status==200){
				if(type==null){
					type='text';
				}
				if(type=='text'){
					callback(xhr.responseText);
				}
				if(type=='xml'){
					callback(xhr.responseXML);
				}
				if(type=='json'){
					callback(eval('('+xhr.responseText+')'));
				}
			}
		};
		xhr.send(null);
	};
	
	//用于发送Ajax的post请求
	$.post=function(url,type){
		var xhr=$.init();
		xhr.open('post',url);
		xhr.setRequestHeader('Content-Type','application/x-form-urlencoded');
		xhr.onreadystatechange=function(){
			if(type==null){
				type='text';
			}
			if(type=='text'){
				callback(xhr.responseText);
			}
			if(type=='xml'){
				callback(xhr.responseXML);
			}
			if(type=='json'){
				callback(eval('('+xhr.responseText+')'));
			}
		};
		xhr.send(data);	
	};
	window.$=$;
})();

编写页面显示的模板

<table width='800' cellspacing='1' cellpadding='4' bgcolor='#eeeeee'>
	<tr>
		<td>序号</td>
		<td>分类名</td>
		<td>描述</td>
	</tr>
	{foreach from=$data item='value'}
	<tr>
		<td>{counter}</td>
		<td>{$value['name']}</td>
		<td>{$value['content']}</td>
	</tr>
	{/foreach}
	<tr>
		<td colspan='3'>
			共{$count}条数据
			共{$pageCount}页
			每页{$pageSize}条
			当前第{$page}页
			<a href='#' onclick="display(1)">首页</a>
			<a href='#' onclick="display({$pagePrev})">上一页</a>
			<a href='#' onclick="display({$pageNext})">下一页</a>
			<a href='#' onclick="display({$pageCount})">末页</a>
		</td>
	</tr>
</table>

编写页面显示页

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax数据分页功能</title>
<script type="text/javascript" src="public.js"></script>
<script>
window.onload=function(){
	display(1);
};
function display(page){
	$.get('page.php','page='+page,function(msg){
          $('content').innerHTML=msg;
		});
}
</script>
<style>
#content{
     padding-left:300px;
     padding-top:100px;
}
</style>
</head>
<body>
<div id='content'>

</div>
</body>
</html>

最后编写PHP操作数据库获取数据

<?php

mysql_connect('localhost','root','root');
mysql_select_db('test');
mysql_query('set names utf8');
$sql="select count(*) as num from category";
$result=mysql_query($sql);
$row=mysql_fetch_assoc($result);
$count=$row['num'];//获取总行数

$page=isset($_GET['page'])?$_GET['page']:1;//获取当前页码数
$pageSize=5;//每页显示多少条数据
$pageCount=ceil($count/$pageSize);//计算总页数
$pagePrev=$page-1;//上一页数
$pageNex=$page+1;//下一页数
if($pagePrev<1) $pagePrev=1;//判断当前页码是否越界
if($pageNex>$pageCount) $pageNex=$pageCount;
if($page<1) $page=1;  //判断当前页码是否越界
if($page>$pageCount) $page=$pageCount;

$offset=($page-1)*$pageSize;//偏移量
$sql="select * from category order by id desc limit $offset,$pageSize";
$result=mysql_query($sql);
$num=mysql_num_rows($result);
$data=array();
for($i=0;$i<$num;$i++){
	$data[]=mysql_fetch_assoc($result);
}
mysql_close();

include('Smarty/Smarty.class.php');
$smarty=new Smarty();
$smarty->assign('data',$data);
$smarty->assign('count',$count);
$smarty->assign('page',$page);
$smarty->assign('pageCount',$pageCount);
$smarty->assign('pageSize',$pageSize);
$smarty->assign('pagePrev',$pagePrev);
$smarty->assign('pageNext',$pageNex);

$str=$smarty->fetch('page.tpl');
header('Content-Type:text/html;charset=utf8');
echo $str;



?>

最后实现的效果如下如所示，这时候达到了无刷新分页的功能了：

Ajax实现数据分页功能

相关推荐