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


Posted in Javascript onSeptember 27, 2015

本文使用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果。

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

HTML

<div id="list"> 
 <ul></ul> 
</div> 
<div id="pagecount"></div>

页面中,#list用来展示数据列表,包括本例要展示的商品图片和标题,#pagecount用来展示分页条,即本例中的上一页、下一页。
当然,别忘了,在head中预先载入jquery库文件。
CSS
我们需要将商品图片进行排列,以及设置分页条样式,当然这些样式的设计可以根据读取成功后的数据进行设置,本例中我们先把css代码贴出来。

#list{width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{float:left;width:220px; height:260px; margin:2px} 
#list ul li img{width:220px; height:220px} 
#list ul li p{line-height:22px} 
#pagecount{width:500px; margin:10px auto; text-align:center} 
#pagecount span{margin:4px; font-size:14px} 
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3; 
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7 
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);} 
jQuery

我们先声明变量,后面的代码要用到以下变量。

var curPage = 1; //当前页码 
var total,pageSize,totalPage; //总记录数,每页显示数,总页数

接下来,我们自定义一个函数:getData(),用来获取当前页数据。函数中,我们利用$.ajax()向后台pages.php发送POST异步请求,将当前页码以JSON格式传递给后台。

//获取数据 
function getData(page){ 
 $.ajax({ 
  type: 'POST', 
  url: 'pages.php', 
  data: {'pageNum':page-1}, 
  dataType:'json', 
  beforeSend:function(){ 
   $("#list ul").append("<li id='loading'>loading...</li>");//显示加载动画 
  }, 
  success:function(json){ 
   $("#list ul").empty();//清空数据区 
   total = json.total; //总记录数 
   pageSize = json.pageSize; //每页显示条数 
   curPage = page; //当前页 
   totalPage = json.totalPage; //总页数 
   var li = ""; 
   var list = json.list; 
   $.each(list,function(index,array){ //遍历json数据列 
    li += "<li><a href='#'><img src='"+array['pic']+"'>"+array['title'] 
    +"</a></li>"; 
   }); 
   $("#list ul").append(li); 
  }, 
  complete:function(){ //生成分页条 
   getPageBar(); 
  }, 
  error:function(){ 
   alert("数据加载失败"); 
  } 
 }); 
}

请求成功后并返回数据,将相应的数据附给变量,并将返回的商品数据列表循环展示到对应容器#list ul中。当数据完全加载完毕后,调用分页条函数getPageBar()生成分页条。

//获取分页条 
function getPageBar(){ 
 //页码大于最大页数 
 if(curPage>totalPage) curPage=totalPage; 
 //页码小于1 
 if(curPage<1) curPage=1; 
 pageStr = "<span>共"+total+"条</span><span>"+curPage 
 +"/"+totalPage+"</span>"; 
  
 //如果是第一页 
 if(curPage==1){ 
  pageStr += "<span>首页</span><span>上一页</span>"; 
 }else{ 
  pageStr += "<span><a href='javascript:void(0)' rel='1'>首页</a></span> 
  <span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>"; 
 } 
  
 //如果是最后页 
 if(curPage>=totalPage){ 
  pageStr += "<span>下一页</span><span>尾页</span>"; 
 }else{ 
  pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'> 
  下一页</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a> 
  </span>"; 
 } 
   
 $("#pagecount").html(pageStr); 
}

最后,当页面第一次加载时,我们加载第一页数据即getData(1),当点击分页条中的分页链接时,调用getData(page)加载对应页码的数据。我们通过getPageBar()函数已预先在翻页连接的属性rel中在埋入了数字页码。

$(function(){ 
 getData(1); 
 $("#pagecount span a").live('click',function(){ 
  var rel = $(this).attr("rel"); 
  if(rel){ 
   getData(rel); 
  } 
 }); 
});

PHP
pages.php接收每次前端页面的ajax请求,根据提交的页码pageNum值,从mysql数据库中获取数据,计算总记录数和总页数,读取对应页码下的数据列表,并将最终结果以JSON格式返回给前端页面。

include_once('connect.php'); //连接数据库,略过,具体请下载源码查看 
 
$page = intval($_POST['pageNum']); //当前页 
 
$result = mysql_query("select id from food"); 
$total = mysql_num_rows($result);//总记录数 
$pageSize = 6; //每页显示数 
$totalPage = ceil($total/$pageSize); //总页数 
 
$startPage = $page*$pageSize; //开始记录 
//构造数组 
$arr['total'] = $total; 
$arr['pageSize'] = $pageSize; 
$arr['totalPage'] = $totalPage; 
$query = mysql_query("select id,title,pic from food order by id asc limit 
$startPage,$pageSize"); //查询分页数据 
while($row=mysql_fetch_array($query)){ 
  $arr['list'][] = array( 
   'id' => $row['id'], 
  'title' => $row['title'], 
  'pic' => $row['pic'], 
  ); 
} 
echo json_encode($arr); //输出JSON数据

这时再回到前端页面,即看到数据已分号页,点击“下一页”看看是不是你要的效果,查看DEMO,分页条的样式大家可以自己定制,我给的是最基本的样式。
最后,附上Mysql表结构,下载源码包中带数据表哦,^-^都为您准备好了。

CREATE TABLE IF NOT EXISTS `food` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT, 
 `title` varchar(100) NOT NULL, 
 `pic` varchar(255) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

以上就是关于jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解,Ajax分页效果让您的网站数据加载显得非常流畅,希望这篇文章对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
Jquery 实现图片轮换
Jan 28 Javascript
js进行表单验证实例分析
Feb 10 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 #Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 #Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 #Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 #Javascript
asp知识整理笔记3(问答模式)
Sep 27 #Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 #Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 #Javascript
You might like
PHP访问Google Search API的方法
2015/03/05 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
深入理解python函数递归和生成器
2016/06/06 Python
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python程序变成软件的实操方法
2019/06/24 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
python 安装impala包步骤
2020/03/28 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
会计专业应届生自荐信
2014/02/07 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
实习生工作证明范本
2014/09/14 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技