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 相关文章推荐
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
详解用node编写自己的cli工具
May 23 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
详解vue 兼容IE报错解决方案
Dec 29 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
详解JS预解析原理
Jun 16 Javascript
JS实现简单打字测试
Jun 24 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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脚本数据库功能详解(上)
2006/10/09 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
Python SQLite3数据库操作类分享
2014/06/10 Python
python中enumerate的用法实例解析
2014/08/18 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
基本款天堂:Everlane
2017/05/13 全球购物
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
跟单文员岗位职责
2014/01/03 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
安全生产检查通报
2014/01/29 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
语文课外活动总结
2014/08/27 职场文书
新课培训心得体会
2014/09/03 职场文书
离婚协议书应该怎么写
2014/10/12 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python