php+ajax实现无刷新数据分页的办法
来源：爱站网时间：2020-05-27编辑：网友分享
分页类在每次翻页时需要刷新整个页面，这种翻页的用户体验显然并不理想，我们希望每次翻页时，只刷新所需数据集的数据，那么php+ajax实现无刷新数据分页的办法大家了解的怎样？一起跟着爱站技术频道小编来看下吧！
分页类在每次翻页时需要刷新整个页面，这种翻页的用户体验显然并不理想，我们希望每次翻页时，只刷新所需数据集的数据，那么php+ajax实现无刷新数据分页的办法大家了解的怎样？一起跟着爱站技术频道小编来看下吧！
index.php 文件，代码如下:
"; //开始分页导航条代码： $pagenav.="
- 显示第 ".($total?($offset+1):0)."-".min($offset+10,$total)." 条记录
- 共 $total 条记录
- "; //如果只有一页则跳出函数： if($pagenum 首页 "; if($prepg) $pagenav.="
- 前页
- "; else $pagenav.="
- 前页
- "; if($nextpg) $pagenav.="
- 后页
- "; else $pagenav.="
- 后页
- "; $pagenav.="
- 尾页
- "; $pagenav.="
- 第 $page 页
- 共 $pagenum 页
- "; //假如传入的页数参数大于总页数，则显示错误信息 If($page>$pagenum){ Echo "Error : Can Not Found The page ".$page; Exit; //开源软件:phpfensi.com } ?>
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文件，如下:
// JavaScript Document
var http_request=false;
function send_request(url){//初始化，指定处理函数，发送请求的函数
http_request=false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest){//Mozilla浏览器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//设置MIME类别
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){//IE浏览器
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){//异常，创建对象实例失败
window.alert("创建XMLHttp对象失败！");
return false;
}
http_request.onreadystatechange=processrequest;
//确定发送请求方式，URL，及是否同步执行下段代码
http_request.open("GET",url,true);
http_request.send(null);
}
//处理返回信息的函数
function processrequest(){
if(http_request.readyState==4){//判断对象状态
if(http_request.status==200){//信息已成功返回，开始处理信息
document.getElementById("results").style.display="none";
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{//页面不正常
alert("您所请求的页面不正常！");
}
}
}
function dopage(obj,url){
document.getElementById(obj).innerHTML="正在读取数据...";
send_request(url);
reobj=obj;
}
数据库文件，如下:
-- phpMyAdmin SQL Dump -- version 2.8.1 -- 主机: localhost -- 服务器版本: 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搜索文件程序分享
