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

最新推荐文章于 2021-09-01 11:21:51 发布
最新推荐文章于 2021-09-01 11:21:51 发布
阅读量355 收藏 2
点赞数
文章标签： php json javascript ViewUI
原文链接：http://www.cnblogs.com/zerogo/p/3308796.html
版权
本文介绍使用jQuery、Ajax、PHP及MySQL实现的数据分页显示方法。通过两个文件即可完成：一个负责显示分页链接，另一个负责获取指定页的数据。具体实现包括请求数据、处理响应、生成页面元素及构建分页条。
摘要由CSDN通过智能技术生成

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

转载于:https://www.cnblogs.com/zerogo/p/3308796.html

jQuery+Ajax+PHP+mysql实现无刷新注册/登陆（用户名邮箱验证码等）
风吹花儿香
04-24 3064
register.html&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;用ajax做登陆页面&lt;/title&gt; &lt;meta charset='utf-8'&gt; &lt;link rel='stylesheet' href='layout.css'&gt; &lt;/head&gt; &a
php mysql ajax 分页_jQuery+Ajax+PHP+Mysql实现分页显示数据
weixin_30305029的博客
01-19 118
$cur_page = $page; //当前页数$page -= 1;$per_page = 10;$previous_btn = true;$next_btn = true;$first_btn = true;$last_btn = true;$start = $page * $per_page; //0 10 20 30 40 第一页：page =...
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
12-28
本文使用jQuery，结合PHP和Mysql，通过实例讲解如何实现Ajax数据加载效果。 HTML <div id=list> <ul></ul> </div> <div id=pagecount></div> 页面中，#list用来展示数据列表，包括本例要展示的商品图片和标题，#pagecount用来展示分页条，即本例中的上一页、下一页。 当然，别忘了，在head中预先载入jquery库文件。 CSS 我们需要将商品图片进行排列，以及设置分页条样式，当然这些样式的设计可以根据读取成功后的数据进行设置，本例中我们先把css代码贴出来。 #list{width:680px;
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
10-23
在介绍知识点之前，需要明确本文的目的是帮助理解如何使用Jquery、Ajax、PHP和MySQL来实现一个客户分类列表的管理系统。该系统主要涉及客户分类数据的展示以及增加、删除和修改等操作。这些操作通过Ajax异步请求与...
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
10-23
在本教程的上下文中，我们将深入探讨如何使用jQuery、Ajax、PHP和MySQL来实现一个分类列表的编辑功能，这是构建一个高效、用户友好的管理系统的关键部分。在上一部分，我们已经了解了如何实现分类列表的新增和删除...
jq.ajax+php+mysql实现分页显示数据
12-21
用jQuery，结合PHP和Mysql，通过获取json数据实现网页分页数据
php mysql 检索跳转_jQuery+AJAX+PHP+MySQL数据库开发搜索功能，无跳转无刷新搜索。...
weixin_32808853的博客
02-19 163
知识点：ajax提交表单，php查询数据库，php返回json数组，javascript遍历输出json数组演示：1、当表单无输入任何关键词的时候，返回**“请输入关键词…”**2、当表单输入的关键词查询无果的时候，返回**“无结果”**3、当表单输入的关键词查询有结果，则返回结果。表单页面index.htmlAJAX搜索*{margin:0px;padding:0px;}h2{text-alig...
php ajax mysql 分页查询_jq.ajax+php+mysql实现分页显示数据
weixin_33895652的博客
01-28 167
编号名字电话号码城市种类日期第一页上一页下一页尾页跳转js代码 【这里是生成数据和分页的代码】php代码 【连接数据库获取信息返回json数据给前台】query("select * from Messages limit {$start},{$pageSize}");$count=$conn->query("select id from Messages")->num_rows;//记...
Jquery+Ajax+Php+Mysql异步刷新
06-30
Jquery+Ajax+Php+Mysql异步刷新 表单验证
Jquery+Ajax+PHP+MySQL实现分类列表源码带mysql数据库
06-17
Jquery+Ajax+PHP+MySQL实现分类列表源码带mysql数据库
mysql ajax分页_jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
weixin_42516581的博客
01-27 249
本文使用jQuery，结合PHP和Mysql，通过实例讲解如何实现Ajax数据加载效果。HTML页面中，#list用来展示数据列表，包括本例要展示的商品图片和标题，#pagecount用来展示分页条，即本例中的上一页、下一页。当然，别忘了，在head中预先载入jquery库文件。CSS我们需要将商品图片进行排列，以及设置分页条样式，当然这些样式的设计可以根据读取成功后的数据进行设置，本例中我们先把...
jQuery+AJAX+PHP+MySQL数据库开发搜索功能，无跳转无刷新搜索。
hebhack的博客
09-01 192
表单页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AJAX搜索</title> <style type="text/css"> *{margin:0px;padding:0
本文使用jQuery+Ajax+PHP+Mysql，通过实例讲解如何实现Ajax无刷新分页效果
weixin_30908941的博客
04-16 161
<div class="lists"> <ul id="ul_lists" class="clearfix"> </ul> </div> #ul_lists以列表的形式展现数据，信息包括商品图片和标题 CSS .lists{width:740px; margin:30px auto 0; positio...
php mysql ajax 分页_php+ajax+jquery分页并显示数据
weixin_33946174的博客
01-28 192
参考https://www.helloweba.com/view-blog-195.htmlhtml页面1 2 3 4 5 6 上面的第一个div是显示帖子列表的地方，包括帖子的标题，作者昵称。第二个div是个按钮，显示下一页。jquery我们先声明变量，后面的代码要用到以下变量。var...
jQuery php ajax mysql_Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
weixin_42519826的博客
02-06 144
本文将采用Jquery+Ajax+PHP+MySQL来实现一个客户分类列表的管理，如何利用Ajax和Json技术让用户操作起来觉得更轻松，感兴趣的小伙伴们可以参考一下在实际应用中，我们要管理一个客户分类，实现对客户分类的增加、删除和修改等操作，如何让这些操作变得更人性化，让用户操作起来更加方便成了我们必须研究的课题。准备阶段您需要具备HTML和Jquery等前端知识，以及基本的PHP程序和MySq...
Struts2.1.6+jQuery Flexigrid 实现JSON分页与Ajax交互
本文档主要介绍了如何在Struts2.1.6框架下结合Spring、Hibernate、jQuery、Flexigrid、Thickbox和MySQL技术实现动态数据分页显示。以下是详细步骤和关键知识点： 1. **技术栈组合**: - Struts2.1.6: 作为Web MVC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值
>