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随机漂浮广告代码具体实例
Nov 19 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 Javascript
Vue项目服务器部署之子目录部署方法
May 12 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
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
php5 non-thread-safe和thread-safe这两个版本的区别分析
2010/03/13 PHP
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)
2013/11/25 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
python小白切忌乱用表达式
2020/05/29 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python邮件中附加文字、html、图片、附件实现方法
2021/01/04 Python
教师实习的自我鉴定
2013/10/26 职场文书
劳资员岗位职责
2013/11/11 职场文书
经理管理专业毕业自荐书范文
2014/02/12 职场文书
岗位职责说明书
2014/05/07 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
校本培训个人总结
2015/02/28 职场文书
起诉状范本
2015/05/20 职场文书
抢劫罪辩护词
2015/05/21 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
生死抉择观后感
2015/06/09 职场文书
幼儿园国培研修日志
2015/11/13 职场文书