`

一个js文件控制的无刷新翻页

 
阅读更多

只要一个js文件就可以控制翻页了,结构非常简单,ajax翻页,传递参数的话可以自己修改,也很简单控制

本例数据库与《jQuery+Ajax+PHP+Mysql实现分页显示数据》相同

 

 js文件

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

 result.php

 

PHP Code
  1. <div id="result">   
  2. <?php   
  3. $classid=$_REQUEST['classid'];  
  4. //注意有个问题,就是数据如果总数小于每页数据不能显示  
  5.   
  6. $page=isset($_GET['page'])?intval($_GET['page']):1; //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1。   
  7. $num=6; //每页显示6条数据   
  8.   
  9. require "../../conn.php";  
  10. mysql_select_db($database_lr$lr);  
  11. /*  
  12. 首先咱们要获取数据库中到底有多少数据,才能判断具体要分多少页,具体的公式就是  
  13. 总数据库除以每页显示的条数,有余进一。  
  14. 也就是说10/3=3.3333=4 有余数就要进一。  
  15. */   
  16.   
  17. $result=mysql_query("select * from content");   
  18. $total=mysql_num_rows($result); //查询所有的数据   
  19.   
  20. $url='result.php';//获取本页URL   
  21.   
  22. //页码计算   
  23. $pagenum=ceil($total/$num); //获得总页数,也是最后一页   
  24. $page=min($pagenum,$page);//获得首页   
  25. $prepg=$page-1;//上一页   
  26. $nextpg=($page==$pagenum ? 0 : $page+1);//下一页   
  27. $offset=($page-1)*$num//获取limit的第一个参数的值,假如第一页则为(1-1)*10=0,第二页为(2-1)*10=10。   
  28.   
  29. //开始分页导航条代码:   
  30. $pagenav=$page."/".$pagenum." <B> ".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B>  Total $total  ";   
  31.   
  32. //第一页:   
  33. if($page==1) {  
  34. $pagenav.="First ";   
  35. }  
  36. else  
  37. {$pagenav.="<a href=javascript:dopage('result','$url?classid=$classid&page=1');>First</a> ";}  
  38. if($prepg$pagenav.=" <a href=javascript:dopage('result','$url?classid=$classid&page=$prepg');>Prev</a> "else $pagenav.=" Prev ";   
  39. if($nextpg$pagenav.=" <a href=javascript:dopage('result','$url?classid=$classid&page=$nextpg');>Next</a> "else $pagenav.=" Next ";   
  40. if ($pagenum>$page){  
  41. $pagenav.=" <a href=javascript:dopage('result','$url?classid=$classid&page=$pagenum');>Last</a> ";   
  42. }  
  43. else{  
  44. $pagenav.=" Last";   
  45. }  
  46. $pagenav.=" Total page $pagenum ";   
  47.   
  48. //假如传入的页数参数大于总页数,则显示错误信息   
  49. if($page>$pagenum){   
  50. echo "Error : Can Not Found The page ".$page;   
  51. exit;   
  52. }   
  53.   
  54. $info=mysql_query("select * from content order by id desc limit $offset,$num"); //获取相应页数所需要显示的数据  
  55.   
  56. if ($total>0)  
  57. {   
  58. while($it=mysql_fetch_array($info)){   
  59. echo "<li>".$it['name']." (".$it['updatetime'].")</li>";   
  60. //显示数据   
  61. echo"<br>";   
  62. echo $pagenav;//输出分页导航   
  63. }  
  64. else  
  65. {  
  66. echo"No content.";  
  67. }  
  68. ?>   
  69. </div>   

 


原文地址:http://www.freejs.net/article_fenye_33.html

0
0
分享到:
评论

相关推荐

    AJAX基础概念、核心技术与典型案例(内涵动态实例)

    2.3.js 一个单独的JS测试文件 2.4.htm 完成层的换肤功能 2.5.htm 用于调试JS程序的测试代码 第3章(/C03/) 3.1.htm 判断浏览器类型的例子 3.2.htm 演示undefinded如何与null...

    程序天下:JavaScript实例自学手册

    6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...

    JavaScript实例精通

    16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm 通过XML HTTP做一个特殊HEAD的请求。 16_7.htm 显示XML数据...

    《JavaScript实例精通》[源代码]

    16_3.htm 加载一个文本文件到一个HTML元素中。 16_4.htm 使用XML HTTP载入一个XML文件。 16_5.htm 通过XML HTTP做一个HEAD的请求。 16_6.htm 通过XML HTTP做一个特殊HEAD的请求。 16_7.htm 显示XML数据...

    asp.net知识库

    .NET关于string转换的一个小Bug Regular Expressions 完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁?[C#] 表达式计算引擎...

    Web端的UI框架BlendUI.zip

    包括无限下拉时的渲染抖动,无刷新翻页的闪烁 此外,vision mobile的调研数据显示,开发者之所以不选用html5的前三大原因是: 性能问题:45.7% 硬件接口有限:37.3% 难以集成原生组件:29.2% 因此,轻组件的...

    uni-z-paging:【uni-app自动分页器】超简单!仅需两步轻松完成完整分页逻辑(刷新,上拉加载更多),分页自动处理。支持自定义加载更多的文字或整个视图,自定义拖动刷新样式,自动管理空数据view等

    仅需两步轻松完成完整分页逻辑(翻页刷新,上拉加载更多),分页自动处理。支持自定义加载更多的文字或整个视图,自定义拖放刷新样式,自动管理空数据视图,支持吸顶效果等。 在DCloud插件市场中访问: ://ext....

    AJAX 源码范例

    08/8.2.9.html 使用abort方法取消一个请求范例 08/8.3.2.html 使用post方法向服务器提交数据范例 08/8.3.3.html 实现服务器相关的二级联动菜单范例 08/a.html 用于ajax获取文件的示例 08/...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ...

    div li的多行多列 无刷新分页示例代码

    翻页文件一次加载了全部的内容,因而不是很适合大型的网站,而适用于数据比较少的情况。 本例未使用数据库。 PHP Code 复制代码 代码如下: ”container”&gt; ”content”&gt; &lt;?php for ($i=1; $i&lt;=53; $i++){?&gt;...

    基本于J2EE的Ajax宝典.rar

    作为一个有多年编程经验的程序员,笔者相信“代码就是硬道理”,因此本书中涵盖了 Ajax 的绝大部分实际应用场景。希望读者也不要仅仅“看书”,而一定要参照本书进行动手操作,将每个应用都实际做一遍,相信会有很大...

    《浩海网络多格式播放器》V3.9.4.1

    9,列表的三循环状态加入了状态说明:)V3.5.1: 修正了V3.5中的一个关于Media Player版本低于9.0会出现的错误!!!V3.8: 技术尝试,本次V3.8全新尝试“语言/布局/功能”三模块分离的制作理念!!让播放器转化成其他...

    含三引擎(Media/Real/Flash)的《浩海网络多格式播放器》V3.8.3

    V3.8.3 新修正一点BUG,和加入了一个人性化设定,及其一个人性化功能!1,修正了网络歌曲选单在搜索关键字的时候,不加入*时搜索出现不正确的严重BUG!2,关闭播放器功能加入了,询问窗体来尽可能减少你的误操作!3,...

    ExtAspNet_v2.3.2_dll

    -修正了IE下Grid中的一个JS问题(feedback:lqm4108)。 -修正Alert消息中引号未编码导致的JS错误(feedback:sun1299shine)。 +集成extjs3.0.3。 -修正弹出对话框的宽度计算错误(会保持最小的状态)。 -增加新的...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    史上最全韩顺平毕业班视频------这里只有10月份,8,9,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....

    史上最全传智播客PHP就业班视频课,8月份视频

    史上最全韩顺平毕业班视频------这里只有8月份,9,10,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....

    史上最全韩顺平传智播客PHP就业班视频,9月份全集

    史上最全韩顺平毕业班视频------这里只有9月份,8,10,11月份在另外一个文件下。 传智播客PHP就业班视频课程列表 8-11 1.html介绍 html运行原理① 8-11 2.html运行原理② html文件基本结构 html元素和属性 8-11 3....

    动易专业版——Upgrade_SiteFactory.Professional_2.5.2.0-2.5.3.0的升级包

    ●修改内嵌代码保存时不会自动刷新JS。 ●CodeSnippetPanel.config有错。 ●生成的百度地图文件Xml元素缺少。 ●网站综合数据生成在“网站生成目录”中,应该生成在网站根目录中。 ●自定义表单的“多行文本...

    风越ASP代码生成器 2.4

    《风越ASP代码生成器 [FireAsp Creator]》是一款采用.Net FrameWork2.0框架,基于Microsoft SQL Server及Microsoft Access数据库的ASP代码生成软件,可快速建立数据信息的:添加、编辑、查看、列表、搜索页面。...

Global site tag (gtag.js) - Google Analytics