`
txf2004
  • 浏览: 7039904 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery+Ajax+PHP+Mysql实现分页显示数据

阅读更多

jQuery+Ajax+PHP+Mysql实现分页显示数据

就2个文件，一个显示分页的文件和一个获取分页的文件

本例数据库与之前《jquery 翻页分页》是相同的

 

演示

主要代码:

 index.html

XML/HTML Code
  1. <script type="text/javascript">  
  2. var curPage = 1; //当前页码  
  3. var total,pageSize,totalPage;  
  4. //获取数据  
  5. function getData(page){   
  6. $.ajax({  
  7. type: 'POST',  
  8. url: 'pages.php',  
  9. data: {'pageNum':page-1},  
  10. dataType:'json',  
  11. beforeSend:function(){  
  12. $("#list ul").append("<li id='loading'>loading...</li>");  
  13. },  
  14. success:function(json){  
  15. $("#list ul").empty();  
  16. total = json.total; //总记录数  
  17. pageSize = json.pageSize; //每页显示条数  
  18. curPage = page; //当前页  
  19. totalPage = json.totalPage; //总页数  
  20. var li = "";  
  21. var list = json.list;  
  22. $.each(list,function(index,array){ //遍历json数据列  
  23. li += "<li><a href='#'>"+array['title']+"</a></li>";  
  24. });  
  25. $("#list ul").append(li);  
  26. },  
  27. complete:function(){ //生成分页条  
  28. getPageBar();  
  29. },  
  30. error:function(){  
  31. alert("数据加载失败");  
  32. }  
  33. });  
  34. }  
  35.   
  36. //获取分页条  
  37. function getPageBar(){  
  38. //页码大于最大页数  
  39. if(curPage>totalPage) curPage=totalPage;  
  40. //页码小于1  
  41. if(curPage<1) curPage=1;  
  42. pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>";  
  43.   
  44. //如果是第一页  
  45. if(curPage==1){  
  46. pageStr += "<span>首页</span><span>上一页</span>";  
  47. }else{  
  48. pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>";  
  49. }  
  50.   
  51. //如果是最后页  
  52. if(curPage>=totalPage){  
  53. pageStr += "<span>下一页</span><span>尾页</span>";  
  54. }else{  
  55. pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";  
  56. }  
  57.   
  58. $("#pagecount").html(pageStr);  
  59. }  
  60.   
  61. $(function(){  
  62. getData(1);  
  63. $("#pagecount span a").live('click',function(){  
  64. var rel = $(this).attr("rel");  
  65. if(rel){  
  66. getData(rel);  
  67. }  
  68. });  
  69. });  
  70. </script>  
  71. </head>  
  72.   
  73. <body>  
  74. <h1 class="logo"><a href="http://www.freejs.net" title="freejs首页"><img src="../../images/logo.png" height="47" width="500" alt="freejs首页" /></a></h1>  
  75. <div id="main_demo">  
  76. <div align="center"><h2><a href="../../article_biaodan_10.html">jQuery+Ajax+PHP+Mysql实现分页显示数据</a></h2></div>  
  77. <div id="main">  
  78. <div id="list">  
  79. <ul></ul>  
  80. </div>  
  81. <div id="pagecount"></div>  
  82. </div>  

pages.php

 

PHP Code
  1. <?php  
  2. include_once('conn.php');  
  3.   
  4. $page = intval($_POST['pageNum']);  
  5.   
  6. $result = mysql_query("select * from content");  
  7. $total = mysql_num_rows($result);//总记录数  
  8.   
  9. $pageSize = 6; //每页显示数  
  10. $totalPage = ceil($total/$pageSize); //总页数  
  11.   
  12. $startPage = $page*$pageSize;  
  13. $arr['total'] = $total;  
  14. $arr['pageSize'] = $pageSize;  
  15. $arr['totalPage'] = $totalPage;  
  16. $query = mysql_query("select * from content order by id asc limit $startPage,$pageSize");  
  17. while($row=mysql_fetch_array($query)){  
  18. $arr['list'][] = array(  
  19. 'id' => $row['id'],  
  20. 'title' => $row['name'],  
  21.   
  22. );  
  23. }  
  24. //print_r($arr);  
  25. echo json_encode($arr);  
  26. ?>   

 

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

0
顶
2
踩
分享到：
动态加载数据autoComplete
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解

    是一个典型的Ajax应用，在页面上，您只需要点击“下一页”，数据区将自动加载...类似的效果在很多网站上应用，尤其在一些需要展示大量图片数据的网页如淘宝商品列表页，Ajax分页效果让您的网站数据加载显得非常流畅。

    SpringMVC + Hibernate4 + JQuery + Ajax + MySQL整合

    4. 分页和排序，利用Ajax和SpringMVC实现动态加载和排序数据。 5. 复杂表单提交，展示如何处理多表单元素和文件上传。 6. 异步验证，使用Ajax进行前端数据验证，提高用户体验。 7. 整合示例，将所有技术融合，创建一...

    jquery+ajax+asp+mysql加载更多。

    在给定的"jquery+ajax+asp+mysql"场景下，我们可以详细探讨如何实现这种功能。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果和AJAX交互。在这个案例中，jQuery将被用来监听用户的...

    jq.ajax+php+mysql实现分页显示数据

    总结来说，实现“jq.ajax+php+mysql实现分页显示数据”的过程主要包括：前端使用jQuery的AJAX发送请求，PHP后端处理请求并从MySQL数据库获取分页数据，再将数据转化为JSON返回给前端，前端解析JSON并动态更新页面。...

    PHP + Jquery + Ajax 无刷分页

    这种技术结合了PHP后端处理、jQuery前端库以及Ajax异步通信，实现了高效且流畅的分页效果。下面我们将详细探讨这三个关键组件以及它们如何协同工作。 **一、PHP基础** PHP（Hypertext Preprocessor）是一种开源...

    jquery+mysql+php无刷新分页

    本教程将详细介绍如何利用jQuery、MySQL和PHP实现这一功能，帮助开发者创建更加流畅的数据浏览体验。 ### 一、jQuery简介 jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果和Ajax交互...

    php+Ajax评论+Jquery+mysql+星星评论+分页

    本文件包含 文件夹img、js、css、class和文件dele.php、 ... 通过php+mysql+jquery实现无刷新评论，包含分页！！还包含星级评分。 界面美观大方，大家稍稍修改就可运用在自己的网页系统中！！！！

    Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统

    在本项目中，"Spring+SpringMVC+Mybatis+Maven+bootstrap+ajax+jQuery整合开发简单的员工后台管理系统"，我们看到一个基于Java技术栈的Web应用开发实例。这个系统利用了多个核心技术来构建一个功能完备的员工管理...

    jquery+ajax分页（新）

    本实例中，我们将深入探讨如何利用jQuery、AJAX以及Spring MVC框架实现一个简单的分页功能，数据库环境为MySQL。 **一、jQuery与AJAX基础** jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理和Ajax...

    无刷新分页jquery+ajax+php

    本教程将基于jQuery、Ajax和PHP实现这一功能，非常适合初学者学习。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画等功能。在无刷新分页中，jQuery主要用于监听用户的交互...

    php+mysql+bootstrap+jquery实现增删查改的前后端

    在本项目中，我们主要探讨如何使用PHP、MySQL、Bootstrap和jQuery这四个技术栈来构建一个功能完善的前后端系统，实现数据的增删查改（CRUD）操作。以下是关于这些技术及其相互配合的详细说明。 **PHP**： PHP是一种...

    php+mysql+ajax实例

    例如，用户在前端输入查询条件，JavaScript通过AJAX将这些数据发送到PHP脚本，PHP脚本查询MySQL数据库并返回结果，再由JavaScript更新页面上的数据。 7. **应用场景** 这种组合常用于实时聊天应用、新闻发布系统、...

    html+php+ajax+mysql留言板

    总结起来，"html+php+ajax+mysql留言板"项目涵盖了Web开发的核心技术，包括静态内容的展示（HTML）、服务器端逻辑处理（PHP）、无刷新交互（AJAX）以及数据持久化（MySQL）。每个环节都涉及多种技术和最佳实践，旨在...

    Jquery+AJAX

    **jQuery + AJAX 实现无刷新分页技术** 在网页开发中，无刷新技术极大地提升了用户体验，使得用户在浏览数据或内容时无需等待整个页面重新加载。`jQuery` 和 `AJAX`（异步 JavaScript 和 XML）是实现这一目标的常见...

    jsp+mysql+ajax登录、注册、分页java实现

    【标题】"jsp+mysql+ajax登录、注册、分页java实现"涉及到的是Web开发中的核心技术，主要展示了如何使用Java Server Pages（JSP）、MySQL数据库和Asynchronous JavaScript and XML（AJAX）来构建一个功能完整的用户...

    php/php+ajax+mysql分页

    PHP实现简单分页** 在PHP中，首先建立与MySQL数据库的连接，设置字符集，然后选择要操作的数据库。接着，我们需要获取当前页面的参数，通常是通过`$_GET['page']`获取。同时，定义每页显示的记录数 `$page_size`。...

    News:新闻发布系统，新闻后台管理BootStrap + Jsp + Servlet + Jdbc + Mysql + Jquery + Ajax

    在新闻发布系统中，Servlet充当控制器角色，接收Jsp发送的请求，调用业务逻辑（如添加、删除、修改新闻），然后将结果返回给Jsp，实现数据的CRUD操作。 4. **Jdbc（Java Database Connectivity）**：Jdbc是Java与...

    健身俱乐部Web网站-JSP+Servlet+Hibernate+jQuery+Ajax

    代码中用到了较多的jQuery和部分Ajax（借助jQuery实现），在阅读代码的时候如果不熟悉jQuery和Ajax的话，还是先去稍微学习几个入门实例较好。 二、运行方式： a. 创建数据库:我用的是MySQL 5.1版本，不同版本之间...

Magicbox
Global site tag (gtag.js) - Google Analytics