Ajax实现数据分页功能
发布时间：2020-12-16 00:25:03 所属栏目：百科 来源：网络整理
导读：在平时网页中看电影的时候经常能够注意到就是在看电影的时候，底部有对电影的评论，点击评论分页的下一页没有重新刷新页面，这时候用到的则是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;
?>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |