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 相关文章推荐
jquery URL参数判断,确定菜单样式
May 31 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
Jul 14 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue多页面开发和打包正确处理方法
Apr 20 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 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
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
使用Python编写vim插件的简单示例
2015/04/17 Python
Python如何使用函数做字典的值
2019/11/30 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
世界领先的豪华床上用品供应商之一:Bedeck Home
2019/03/18 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
面试后感谢信怎么写
2014/02/01 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
授权收款委托书范本
2014/10/10 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
语文教师个人工作总结
2015/02/06 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
python随机打印成绩排名表
2021/06/23 Python
python读取mnist数据集方法案例详解
2021/09/04 Python
Python基础 括号()[]{}的详解
2021/11/07 Python