欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > php专栏 > php分页 >

php+ajax实现无刷新数据分页例子

来源:未知 ?? 时间:2015-04-11 15:09?作者:xxadmin

[导读] 无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新数据分页了,例子非常的简单大家只要按流程来操作就可以了哦. index.php 文件代码如下: ?php...

无刷新功能我们用到很多很多的,下面我就来给各位介绍一个实例,就是实现php+ajax实现无刷新数据分页了,例子非常的简单大家只要按流程来操作就可以了哦.

index.php 文件代码如下:

  1. <?php 
  2. header("Content-type: text/html;charset=GBK");/输出编码,避免中文乱码 
  3. ?> 
  4. <html> 
  5. <head> 
  6. <title>ajax分页演示</title> 
  7. <script language="javascript" src="ajaxpg.js"></script> 
  8. <link rel="stylesheet" type="text/css" href="page.css"
  9. </head> 
  10. <body> 
  11. <div id="result"
  12. <?php 
  13. $page=isset($_GET['page'])?intval($_GET['page']):1;  /这句就是获取page=18中的page的值,假如不存在page,那么页数就是1。 
  14. $num=3;  /每页显示10条数据 
  15.  
  16. $db=mysql_connect("localhost","root","123456");  /创建数据库连接 
  17. mysql_select_db("demo",$dbor die("数据库链接错误");  /选择要操作的数据库 
  18. mysql_query("set names gbk"); 
  19. /* 
  20. 首先咱们要获取数据库中到底有多少数据,才能判断具体要分多少页,具体的公式就是 
  21. 总数据库除以每页显示的条数,有余进一。 
  22. 也就是说10/3=3.3333=4 有余数就要进一。 
  23. */ 
  24.  
  25. $result=mysql_query("select * from brand"); 
  26. $total=mysql_num_rows($result); /查询所有的数据 
  27.  
  28. $url='test.php';/设置ajax提交页面地址的URL,这里设置成test.php通过ajax把参数传递给test.php再把处理过的内容赋值到本页的div id=result。 
  29. /页码计算 
  30. $pagenum=ceil($total/$num);/获得总页数,也是最后一页 
  31. $page=min($pagenum,$page);/获得首页 
  32. $prepg=$page-1;/上一页 
  33. $nextpg=($page==$pagenum ? 0 : $page+1);/下一页 
  34. $offset=($page-1)*$num/获取limit的第一个参数的值,假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。 
  35. $pagenav="<ul>"
  36.  
  37. /开始分页导航条代码: 
  38. $pagenav.="<li>显示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 条记录</li><li>共 $total 条记录&nbsp;</li>"
  39.  
  40. /如果只有一页则跳出函数: 
  41. if($pagenum<=1) return false; 
  42.  
  43. $pagenav.="<li> <a href=javascript:dopage('result','$url?page=1');>首页</a></li> "
  44. if($prepg$pagenav.="<li> <a href=javascript:dopage('result','$url?page=$prepg');>前页</a></li> "else $pagenav.=" <li>前页</li> "
  45. if($nextpg$pagenav.="<li><a href=javascript:dopage('result','$url?page=$nextpg');>后页</a> </li>"else $pagenav.=" <li>后页</li> "
  46. $pagenav.="<li> <a href=javascript:dopage('result','$url?page=$pagenum');>尾页</a></li> "
  47. $pagenav.="<li>第 $page 页</li><li>共 $pagenum 页</li></ul>"
  48.  
  49. /假如传入的页数参数大于总页数,则显示错误信息 
  50. If($page>$pagenum){ 
  51.  Echo "Error : Can Not Found The page ".$page
  52.  Exit;  /开源软件:phpfensi.com 
  53. ?></div><div id="results"
  54. <?php 
  55.   echo $pagenav;/输出分页导航 
  56. ?> 
  57. </div> 
  58. </body> 
  59. </html> 

css代码:

  1. /* CSS Document */ 
  2. /* CSS Document */ 
  3. #result ul li{ 
  4. height:20px
  5. width:auto
  6. display:block
  7. color:#999
  8. border:1px solid #999
  9. float:left
  10. list-style:none
  11. font-size:12px
  12. margin-left:5px
  13. line-height:20px
  14. vertical-align:middle
  15. text-align:center
  16. #result ul li a:link{ 
  17. width:50px
  18. height:20px
  19. display:block
  20. line-height:20px
  21. background:#09C
  22. border:1px solid #fff
  23. color:#fff
  24. text-decoration:none
  25. #result ul li a:hover{ 
  26. width:50px
  27. height:20px
  28. display:block
  29. line-height:20px
  30. background:#09C
  31. border:1px solid #fff
  32. color:#F60
  33. text-decoration:none

ajaxpg.js文件如下:

  1. / JavaScript Document 
  2. var http_request=false
  3.   function send_request(url){/初始化,指定处理函数,发送请求的函数 
  4.  http_request=false
  5. /开始初始化XMLHttpRequest对象 
  6. if(window.XMLHttpRequest){/Mozilla浏览器 
  7. http_request=new XMLHttpRequest(); 
  8. if(http_request.overrideMimeType){/设置MIME类别 
  9.   http_request.overrideMimeType("text/xml"); 
  10. else if(window.ActiveXObject){/IE浏览器 
  11. try
  12.  http_request=new ActiveXObject("Msxml2.XMLHttp"); 
  13. }catch(e){ 
  14.  try
  15.  http_request=new ActiveXobject("Microsoft.XMLHttp"); 
  16.  }catch(e){} 
  17.  } 
  18. if(!http_request){/异常,创建对象实例失败 
  19. window.alert("创建XMLHttp对象失败!"); 
  20. return false
  21. http_request.onreadystatechange=processrequest; 
  22. /确定发送请求方式,URL,及是否同步执行下段代码 
  23.  http_request.open("GET",url,true); 
  24. http_request.send(null); 
  25.   } 
  26.   /处理返回信息的函数 
  27.   function processrequest(){ 
  28. if(http_request.readyState==4){/判断对象状态 
  29.   if(http_request.status==200){/信息已成功返回,开始处理信息 
  30.  document.getElementById("results").style.display="none"
  31.  document.getElementById(reobj).innerHTML=http_request.responseText; 
  32. else{/页面不正常 
  33.  alert("您所请求的页面不正常!"); 
  34.   } 
  35.   function dopage(obj,url){ 
  36. document.getElementById(obj).innerHTML="<font color='green' font-size='12'>正在读取数据...</font>"
  37. send_request(url); 
  38. reobj=obj; 

数据库文件如下:

  1. -- phpMyAdmin SQL Dump 
  2. -- version 2.8.1 
  3. -- /wwwaff4phpmyadminaff4net 
  4. --  
  5. -- 主机: localhost 
  6. -- 生成日期: 2010 年 01 月 22 日 14:41 
  7. -- 服务器版本: 5.0.22 
  8. -- PHP 版本: 5.2.12 
  9. --  
  10. -- 数据库: `demo` 
  11. -- 
  12. -- -------------------------------------------------------- 
  13. --  
  14. -- 表的结构 `brand` 
  15. -- 
  16. CREATE TABLE `brand` ( 
  17.   `id` int(7) NOT NULL auto_increment, 
  18.   `sp_brand` varchar(255) default NULL
  19.   PRIMARY KEY  (`id`) 
  20. ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=19 ; 
  21. --  
  22. -- 导出表中的数据 `brand` 
  23. -- 
  24. INSERT INTO `brand` (`id`, `sp_brand`) VALUES (1, 'hello world'), 
  25. (2, '你好'), 
  26. (3, '恩'), 
  27. (4, 'fdsafdsafdsa'), 
  28. (5, 'fdsafdafdsafdas'), 
  29. (6, 'fdsafdsa'), 
  30. (7, 'fdsafdsafdas'), 
  31. (8, '恩'), 
  32. (9, '恩'), 
  33. (10, '恩'), 
  34. (11, '恩11'), 
  35. (12, '恩'), 
  36. (13, '恩'), 
  37. (14, '恩'), 
  38. (15, '恩'), 
  39. (16, '恩'), 
  40. (17, '恩'), 
  41. (18, '恩18'); 

下面介绍这些文件的功能

ajaxpg.js:ajax无刷新核心文件,一般不要去作修改.

index.php:实现ajax无刷新的文件了,这里调用了ajaxpg.js文件,配置了mysql用户密码,要和自己本地的一致,以及显示分页的效果.

page.css:这是分页的CSS样式文件,用来美化的,就不多介绍了.

brand.sql:这是MYSQL数据库的文件了,进行导入到MYSQL数据库中,同样,如果不会导入,可以参考PHPfensi.com中如何导入.sql文章即可.

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

李盈莹直言发挥比预想要好 称一传有进步但差很远 左手微软、右手Flipkart 沃尔玛动手围剿亚马逊 国家统计局:3月份工业生产者出厂价格同比涨3.1% 这款神药被通报81次 号称“扶着进来跑着出去” 美籍华人称“微信付款不太会用” 车费65付成6500 美国一天三次对中国输美产品采取贸易救济措施 区块链媒体跑步入场:资本疯狂加持 盈利模式待考 沈炜:vivo年底前完成5G实验用机研发 明年给到运营… 摩根大通:新浪对移动流量投资成功 目标价180美元 鸿海手机代工业务低迷:1-3月净利润降15% 老挝电站大坝坍塌 外交部:正就救灾同老方沟通 新京报评白宫通讯主任离职:白宫权斗新态势开启
37+13+14!连砍17分收比赛 MVP成30年来第… 欧盟要求加入WTO就中美钢铝关税争端的磋商 美国休斯顿一座化工厂发生爆炸 至少22人受伤 主要汽车出口国计划针对美国的关税威胁召开会议 厅官受贿115万 被查前投案称收受5万获缓刑 杨震足彩:巴萨主场防平 米兰谨防大冷 男子发布“让日本再屠杀南京”极端言论 被警方刑拘 再失高管:Alexa副总裁离职 亚马逊成业界墙脚 外媒:中国在朝鲜半岛问题上展示“关键作用” 美游泳全锦赛19岁小将惊艳4冠 世锦赛7金王惨败 申花超级杯海报:冠军之心! 蓝魔虹口争赛季首胜 美国阿拉巴马州一家烧烤店发生枪击事件 致1死3伤
韩朝举行工作会谈:讨论韩朝首脑会晤细节安排 詹姆斯遇10年来最大困境!上次这样绿军夺冠了 日本力争输美汽车获关税豁免 在农产品等领域或让步 12+9这老兵在国王重生 生死时刻封盖新狼王 新浪围棋学院张老师:从职业视角打造围棋小记者 真正的\"坐\"电梯 小区为防电瓶车上楼电梯中设板凳 92岁马哈蒂尔宣誓就任马来西亚新总理 印尼3座教堂遭爆炸袭击 暂无中国公民伤亡报告 民革:尽快出台法规政策规范个人数据收集使用 白手起家好项目 适合白手起家的项目 需要钱的的给我打电话 养牛挣钱为什么没人养 AG亚游集团