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中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
Jun 13 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
JavaScript比较同一天的时间大小实例代码
Feb 09 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
JavaScript 定时器详情
Nov 11 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/07/19 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
3种js实现string的substring方法
2015/11/09 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
vue导航栏部分的动态渲染实例
2019/11/01 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
python 递归相关知识总结
2021/03/03 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
医院总经理职责
2013/12/26 职场文书
大学生军训广播稿
2014/01/24 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
MySQL插入数据与查询数据
2022/03/25 MySQL