jQuery+Ajax+PHP实现异步分页数据显示
这几天做毕业设计的时候需要使用到一个异步分页的功能，即翻页的时候只是刷新分页的数据而不是刷新整个页面。因为之前做项目的时候没有做过这方面的功能，所以还是纠结了挺长时间的，在网上也找了很多资料，结合自己的理解，做了一个比较简单的异步分页数据显示功能，这里使用的是jQuery+Ajax+PHP。
先说说基本原理吧，其实就是翻页时使用Ajax向后台传递页面参数请求某个分页的数据，后台接收到参数之后就在数据库中查询相应的记录，然后以json的格式传输给Ajax，Ajax接收到数据后，使用jQuery在html页面上移除原来旧的分页数据，添加上新的分页数据，同时根据分页情况添加分页按钮栏。
下面看看简单的代码实现：
1. html页面：
<body>
<div id="data-area">
<ul>
<!--这里添加分页数据-->
</ul>
</div>
<div id="pageBar"><!--这里添加分页按钮栏--></div>
</body>
2. js代码：
var curPage; //当前页数
var totalItem; //总记录数
var pageSize; //每一页记录数
var totalPage; //总页数 //获取分页数据
function turnPage(page)
{
$.ajax({
type: 'POST',
url: commentDataUrl, //这里是请求的后台地址，自己定义
data: {'pageNum':page},
dataType: 'json',
beforeSend: function() {
$("#data-area ul").append("加载中...");
},
success: function(json) {
$("#data-area ul").empty(); //移除原来的分页数据
totalItem = json.totalItem;
pageSize = json.pageSize;
curPage = page;
totalPage = json.totalPage;
var data_content = json.data_content;
var data_html = "";
$.each(data_content,function(index,array) { //添加新的分页数据（数据的显示样式根据自己页面来设置，这里只是一个简单的列表）
data_html += "<li>"+array['id']+" "+array['name']+" "+array['num']+" "+array['flag']+"</li>";
}); $("#data-area ul").append(data_html);
},
complete: function() { //添加分页按钮栏
getPageBar();
},
error: function() {
alert("数据加载失败");
}
});
} //获取分页条（分页按钮栏的规则和样式根据自己的需要来设置）
function getPageBar()
{
if(curPage > totalPage) {
curPage = totalPage;
}
if(curPage < 1) {
curPage = 1;
} pageBar = ""; //如果不是第一页
if(curPage != 1){
pageBar += "<span class='pageBtn'><a href='javascript:turnPage(1)'>首页</a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(curPage-1)+")'><<</a></span>";
} //显示的页码按钮(5个)
var start,end;
if(totalPage <= 5) {
start = 1;
end = totalPage;
} else {
if(curPage-2 <= 0) {
start = 1;
end = 5;
} else {
if(totalPage-curPage < 2) {
start = totalPage - 4;
end = totalPage;
} else {
start = curPage - 2;
end = curPage + 2;
}
}
} for(var i=start;i<=end;i++) {
if(i == curPage) {
pageBar += "<span class='pageBtn-selected'><a href='javascript:turnPage("+i+")'>"+i+"</a></span>";
} else {
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+i+")'>"+i+"</a></span>";
}
} //如果不是最后页
if(curPage != totalPage){
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+(parseInt(curPage)+1)+")'>>></a></span>";
pageBar += "<span class='pageBtn'><a href='javascript:turnPage("+totalPage+")'>尾页</a></span>";
} $("#pageBar").html(pageBar);
} //页面加载时初始化分页
$(function() {
turnPage(1);
});
3. PHP代码：
//我项目中使用的是ThinkPHP框架，Ajax的请求地址是一个方法
public function getLabelData()
{
$pageNum = I('pageNum');
$totalItem = M('label')->count();
$pageSize = 6;
$totalPage = ceil($totalItem/$pageSize); $startItem = ($pageNum-1) * $pageSize;
$arr['totalItem'] = $totalItem;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage; $labels = M('label')->limit($startItem,$pageSize)->select(); foreach($labels as $lab) {
$arr['data_content'][] = $lab;
} echo json_encode($arr);
}
4. 分页按钮栏样式CSS：
#pageBar {
text-align: right;
padding: 0 20px 20px 0;
}
.pageBtn a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin : 0 3px;
font-size: 13px;
background: #ECECEC;
color: black;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}
.pageBtn-selected a {
display: inline-block;
border: 1px solid #aaa;
padding: 2px 5px;
margin : 0 3px;
font-size: 13px;
background: #187BBD;
color: white;
text-decoration: none;
-moz-border-radius: 2px;
-webkit-border-radius: 3px;
}
.pageBtn a:hover {
background: #187BBD;
color: white;
}
5. 实现效果：
（总是显示五个数字页面按钮，数字跟着当前所在页面变化）
其实，异步分页的应用还是挺广泛的，有些应用并不是很明显地看上去就是数据分页，但本质上还是异步分页，例如：一些网站上的“换一批”功能，其实就是异步分页的变形，我们只要把分页按钮栏的规则和显示效果修改一下就可以轻松实现了！！！
jQuery+Ajax+PHP实现异步分页数据显示的更多相关文章
- jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法
jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法 在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...
- 基于Jquery+Ajax+Json+存储过程 高效分页
在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...
- jquery ajax json简单的分页，模拟数据，没有封装，只显示原理
简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...
- jQuery+Ajax+PHP+Mysql实现分页显示数据
css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } ...
- Jquery+Ajax+Bootstrap Paginator实现分页的拼接
效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...
- jQuery Ajax async=>false异步改为同步时，导致浏览器假死的处理方法
今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户 ...
- jQuery+AJAX实现纯js分页功能
使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...
- JQUERY AJAX无刷新异步上传文件
AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...
- jQuery+Ajax滚屏异步加载数据实现（附源码）
一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...
随机推荐
- 存储过程重置SEQUENCE值从新开始。
CREATE OR REPLACE PROCEDURE RESET_SEQUENCE( v_SeqName IN VARCHAR2, v_sqlcode OUT NUMBER, v_sqlerrm O ...
- Oracle中Union与Union All的区别(适用多个数据库)
Oracle中Union与Union All的区别(适用多个数据库) 如果我们需要将两个select语句的结果作为一个整体显示出来,我们就需要用到union或者union all关键字.union(或 ...
- MyeclipseJRE版本设置
1.首先添加JDK版本 Window——Preferences——Java——Install JREs——Add——Stand VM——浏览JDK安装版本完成即可(一定是JDK中JRE的安装目录如:D ...
- 深入理解计算机系统（2.5）------C语言中的有符号数和无符号数以及扩展和截断数字
上一篇博客我们讲解了计算机中整数的表示,包括无符号编码和补码编码,以及它们之间的互相转换,个人觉得那是非常重要的知识要点.这篇博客我们将介绍C语言中的有符号数和无符号数以及扩展和截断数字. 1.C语言 ...
- SQL三类语句
1. DDL (Data Definition Language, 数据定义语言) CREATE: 创建数据库和表等对象 DROP: 删除数据库和表等对象 ALTER: 修改数据库和表等对象的结构 2 ...
- Sping IOC
这2天学习了Spring的AOP 其中包括注解式和非注解式的配置 个人感觉注解式的配置非常好用.具体内容如下: 1. AOP 面向切面编程 个人理解就是在一个写好的方法上增加一些新的功能 ...
- CSDN博客新手使用方案
CSDN博客简易使用 在CSDN上写博客,总是遇到很多问题,虽然这些问题很简单,但是对于新手来说,缺经常遇到,因此写篇博客记载. 一.CSDN的博客如何上传图片 如果有现成 ...
- 寻找bug并消灭系列——记录在Android开发所遇到的bug（一）
之前使用了Android Studio的插件直接为button绑定了监听器,并实现onClick方法(我的onClick方法无论点击哪一个都是要实现setcontentview这个方法设置layout ...
- 在Ubuntu上安装arm-linux-gcc的问题
由于之前将Ubuntu的更新关掉了,所以导致我下载32位兼容包一直出错. 在arm-linux-gcc 安装之后,还不能编译程序的话,首先看自己的系统是多少位的,因为网上大部分的安装包都是32位的,所 ...
- 认识 Java Message Service
1. Java Message Service : 是一个消息服务的标准或者说是规范,允许应用程序组件基于JavaEE平台创建.发送.接收和读取消息. 实现Java 程序与MQ Server 之间互相 ...