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 相关文章推荐
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
jquery的clone方法应用于textarea和select的bug修复
Jun 26 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
详解vue-cli3使用
Aug 14 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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实现详细解析
2013/08/24 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
了解重排与重绘
2019/05/29 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
园林资料员岗位职责
2013/12/30 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
撤诉申请怎么写
2015/05/19 职场文书
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
如何解决flex文本溢出问题小结
2022/07/15 HTML / CSS