PHP+jquery+ajax实现分页


Posted in Javascript onDecember 09, 2016

本文实例为大家分享了jquery ajax实现分页的具体代码,供大家参考,具体内容如下

HTML

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

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();











当点击分页条中的分页链接时,调用getData(page)加载对应页码的数据。







$("#pagecount span a").on('click',function(){ 
 


 var rel = $(this).attr("rel"); 
 


if(rel){ 
 

 getData(rel); 
 


} 
 



 }); 

 }, 
 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),

$(function(){ 
 getData(1); 
 
});

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数据

最后,附上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分页功能操作 JavaScript分页功能操作

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
Javascript玩转继承(三)
May 08 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
js微信扫描二维码登录网站技术原理
Dec 01 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
jquery实现轮播图特效
Apr 12 jQuery
Python版实现微信公众号扫码登陆
May 28 Javascript
javascript垃圾收集机制的原理分析
Dec 08 #Javascript
基于JS实现的随机数字抽签实例
Dec 08 #Javascript
利用js+css+html实现固定table的列头不动
Dec 08 #Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 #Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 #Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 #Javascript
js倒计时小实例(多次定时)
Dec 08 #Javascript
You might like
第1次亲密接触PHP5(2)
2006/10/09 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
document.getElementById获取控件对象为空的解决方法
2013/11/20 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
JavaScript数组去重算法实例小结
2018/05/07 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
python机器人行走步数问题的解决
2018/01/29 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
世界上最大的艺术社区:SAA
2020/12/30 全球购物
实习会计求职自荐信范文
2014/03/10 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
课题研究阶段性总结
2015/08/13 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
Java的Object类的九种方法
2022/04/13 Java/Android