php+ajax实现无刷新数据分页的办法


Posted in PHP onNovember 02, 2015

本文实例讲述了php+ajax实现无刷新分页的方法。分享给大家供大家参考。具体实现方法如下:

index.php 文件,代码如下:

<?php 
header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 
?> 
<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; //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1。 
$num=3; //每页显示10条数据 
 
$db=mysql_connect("localhost","root","123456"); //创建数据库连接 
mysql_select_db("demo",$db) or die("数据库链接错误"); //选择要操作的数据库 
mysql_query("set names gbk"); 
/* 
首先咱们要获取数据库中到底有多少数据,才能判断具体要分多少页,具体的公式就是 
总数据库除以每页显示的条数,有余进一。 
也就是说10/3=3.3333=4 有余数就要进一。 
*/ 
 
$result=mysql_query("select * from brand"); 
$total=mysql_num_rows($result); //查询所有的数据 
 
$url='test.php';//设置ajax提交页面地址的URL,这里设置成test.php通过ajax把参数传递给test.php再把处理过的内容赋值到本页的div id=result。 
//页码计算 
$pagenum=ceil($total/$num);//获得总页数,也是最后一页 
$page=min($pagenum,$page);//获得首页 
$prepg=$page-1;//上一页 
$nextpg=($page==$pagenum ? 0 : $page+1);//下一页 
$offset=($page-1)*$num; //获取limit的第一个参数的值,假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。 
$pagenav="<ul>"; 
 
//开始分页导航条代码: 
$pagenav.="<li>显示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 条记录</li><li>共 $total 条记录 </li>"; 
 
//如果只有一页则跳出函数: 
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>"; 
 
//假如传入的页数参数大于总页数,则显示错误信息 
If($page>$pagenum){ 
 Echo "Error : Can Not Found The page ".$page; 
 Exit; //开源软件:phpfensi.com 
} 
?></div><div id="results"> 
<?php 
 echo $pagenav;//输出分页导航 
?> 
</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文件,如下:

// 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="<font color='green' font-size='12'>正在读取数据...</font>"; 
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文章即可。

例子非常的简单大家只要按流程来操作就ok啦,希望这篇文章能帮助大家真正的实现php+ajax无刷新分页。

PHP 相关文章推荐
如何使用动态共享对象的模式来安装PHP
Oct 09 PHP
PHP文件上传实例详解!!!
Jan 02 PHP
经典的PHPer为什么被认为是草根?
Apr 02 PHP
ini_set的用法介绍
Jan 07 PHP
php格式化日期和时间格式化示例分享
Feb 24 PHP
PHP连接和操作MySQL数据库基础教程
Sep 29 PHP
PHP实现图片裁剪、添加水印效果代码
Oct 01 PHP
php计算两个整数的最大公约数常用算法小结
Mar 05 PHP
php的闭包(Closure)匿名函数初探
Feb 14 PHP
php opendir()列出目录下所有文件的实例代码
Oct 02 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
Jan 19 PHP
总结一些PHP中好用但又容易忽略的小知识
Jun 02 PHP
PHP中Http协议post请求参数
Nov 02 #PHP
浅谈PHP中foreach/in_array的使用
Nov 02 #PHP
php防止用户重复提交表单
Nov 02 #PHP
windows8.1下Apache+Php+MySQL配置步骤
Oct 30 #PHP
php验证邮箱和ip地址最简单方法汇总
Oct 30 #PHP
php三种实现多线程类似的方法
Oct 30 #PHP
php搜索文件程序分享
Oct 30 #PHP
You might like
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
5款适合PHP使用的HTML编辑器推荐
2015/07/03 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
使用js判断当前时区TimeZone是否是夏令时
2014/02/23 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
PHP 实现一种多文件上传的方法
2017/09/20 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
python模块之StringIO使用示例
2015/04/08 Python
Python实现KNN邻近算法
2021/01/28 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
Python制作动态字符图的实例
2019/01/27 Python
详解重置Django migration的常见方式
2019/02/15 Python
PyQt5根据控件Id获取控件对象的方法
2019/06/25 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
在校生自我鉴定
2014/01/23 职场文书
人事科岗位职责范本
2014/03/02 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
教师工作证明范本
2015/06/12 职场文书
队名及霸气口号大全
2015/12/25 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
详解Spring事件发布与监听机制
2021/06/30 Java/Android
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android