php+ajax实现无刷新数据分页例子
无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新数据分页了,例子非常的简单大家只要按流程来操作就可以了哦.
index.php 文件代码如下:
<?php
header("Content-type: text/html;charset=GBK");/pic/div>
?>
<html>
<head>
<title>ajax分页演示</title>
<script language="javascript" src="ajaxpg.js"></script>
<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
<div id="result">
<?php
$page=isset($_GET['page'])?intval($_GET['page']):1; /pic/div>
$num=3; /pic/div>
$db=mysql_connect("localhost","root","123456"); /pic/div>
mysql_select_db("demo",$db) or die("数据库链接错误"); /pic/div>
mysql_query("set names gbk");
/*
首先咱们要获取数据库中到底有多少数据，才能判断具体要分多少页，具体的公式就是
总数据库除以每页显示的条数，有余进一。
也就是说10/3=3.3333=4 有余数就要进一。
*/
$result=mysql_query("select * from brand");
$total=mysql_num_rows($result); /pic/div>
$url='test.php';/pic/div>
/pic/div>
$pagenum=ceil($total/$num);/pic/div>
$page=min($pagenum,$page);/pic/div>
$prepg=$page-1;/pic/div>
$nextpg=($page==$pagenum ? 0 : $page+1);/pic/div>
$offset=($page-1)*$num; /pic/div>
$pagenav="<ul>";
/pic/div>
$pagenav.="<li>显示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 条记录</li><li>共 $total 条记录 </li>";
/pic/div>
if($pagenum<=1) return false;
$pagenav.="<li> <a href=javascript：dopage('result','$url?page=1');>首页</a></li> ";
if($prepg) $pagenav.="<li> <a href=javascript：dopage('result','$url?page=$prepg');>前页</a></li> "; else $pagenav.=" <li>前页</li> ";
if($nextpg) $pagenav.="<li><a href=javascript：dopage('result','$url?page=$nextpg');>后页</a> </li>"; else $pagenav.=" <li>后页</li> ";
$pagenav.="<li> <a href=javascript：dopage('result','$url?page=$pagenum');>尾页</a></li> ";
$pagenav.="<li>第 $page 页</li><li>共 $pagenum 页</li></ul>";
/pic/div>
If($page>$pagenum){
Echo "Error : Can Not Found The page ".$page;
Exit; /pic/div>
}
?></div><div id="results">
<?php
echo $pagenav;/pic/div>
?>
</div>
</body>
</html>
css代码:
/* CSS Document */
/* CSS Document */
#result ul li{
height:20px;
width:auto;
display:block;
color:#999;
border:1px solid #999;
float:left;
list-style:none;
font-size:12px;
margin-left:5px;
line-height:20px;
vertical-align:middle;
text-align:center;
}
#result ul li a:link{
width:50px;
height:20px;
display:block;
line-height:20px;
background:#09C;
border:1px solid #fff;
color:#fff;
text-decoration:none;
}
#result ul li a:hover{
width:50px;
height:20px;
display:block;
line-height:20px;
background:#09C;
border:1px solid #fff;
color:#F60;
text-decoration:none;
}
ajaxpg.js文件如下:
/pic/div>
var http_request=false;
function send_request(url){/pic/div>
http_request=false;
/pic/div>
if(window.XMLHttpRequest){/pic/div>
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){/pic/div>
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){/pic/div>
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){/pic/div>
window.alert("创建XMLHttp对象失败！");
return false;
}
http_request.onreadystatechange=processrequest;
/pic/div>
http_request.open("GET",url,true);
http_request.send(null);
}
/pic/div>
function processrequest(){
if(http_request.readyState==4){/pic/div>
if(http_request.status==200){/pic/div>
document.getElementById("results").style.display="none";
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{/pic/div>
alert("您所请求的页面不正常！");
}
}
}
function dopage(obj,url){
document.getElementById(obj).innerHTML="<font color='green' font-size='12'>正在读取数据...</font>";
send_request(url);
reobj=obj;
}
数据库文件如下:
-- phpMyAdmin SQL Dump
-- version 2.8.1
-- /pic/div>
--
-- 主机: localhost
-- 生成日期: 2010 年 01 月 22 日 14:41
-- 服务器版本: 5.0.22
-- PHP 版本: 5.2.12
--
-- 数据库: `demo`
--
-- --------------------------------------------------------
--
-- 表的结构 `brand`
--
CREATE TABLE `brand` (
`id` int(7) NOT NULL auto_increment,
`sp_brand` varchar(255) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=19 ;
--
-- 导出表中的数据 `brand`
--
INSERT INTO `brand` (`id`, `sp_brand`) VALUES (1, 'hello world'),
(2, '你好'),
(3, '恩'),
(4, 'fdsafdsafdsa'),
(5, 'fdsafdafdsafdas'),
(6, 'fdsafdsa'),
(7, 'fdsafdsafdas'),
(8, '恩'),
(9, '恩'),
(10, '恩'),
(11, '恩11'),
(12, '恩'),
(13, '恩'),
(14, '恩'),
(15, '恩'),
(16, '恩'),
(17, '恩'),
(18, '恩18');
下面介绍这些文件的功能
ajaxpg.js:ajax无刷新核心文件,一般不要去作修改.
index.php:实现ajax无刷新的文件了,这里调用了ajaxpg.js文件,配置了mysql用户密码,要和自己本地的一致,以及显示分页的效果.
page.css:这是分页的CSS样式文件,用来美化的,就不多介绍了.
brand.sql:这是MYSQL数据库的文件了,进行导入到MYSQL数据库中,同样,如果不会导入,可以参考PHPfensi.com中如何导入.sql文章即可.
【php+ajax实现无刷新数据分页例子】相关文章：
php+ajax实现无刷新的新闻留言系统01-10
html无刷新分页前端代码03-14
如何实现bootstrap jquery dataTable异步ajax刷新表格数据02-01
一个PHP+MSSQL分页的例子02-23
基于PHP+Ajax实现表单验证的详解01-01
PHP如何使用curl实现数据抓取02-05
cakephp的分页排序12-09
word怎样自动分页02-20
php分页类代码10-03