Ajax实现数据分页功能

来源：互联网发布：python统计字符串长度编辑：程序博客网时间：2024/06/11 09:46

在平时网页中看电影的时候经常能够注意到就是在看电影的时候，底部有对电影的评论，点击评论分页的下一页没有重新刷新页面，这时候用到的则是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,data,callback,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操作数据库获取数据

<?phpmysql_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;?>

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

0 0