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 ...
随机推荐
- lintcode 155 二叉树的最小深度
二叉树的最小深度 描述 笔记 数据 评测 给定一个二叉树,找出其最小深度. 二叉树的最小深度为根节点到最近叶子节点的距离. 您在真实的面试中是否遇到过这个题? Yes 哪家公司问你的这个题? Ai ...
- Struts2第五篇【类型转换器、全局、局部类型转换器】
前言 上篇博文已经讲解了,Struts2为我们实现了数据自动封装-由上篇的例子我们可以看出,表单提交过去的数据全都是String类型的,但是经过Struts自动封装,就改成是JavaBean对应成员变 ...
- MyBatis学习（四）XML配置文件之SQL映射的XML文件
SQL映射文件常用的元素: 1.select 查询语句是MyBatis最常用的语句之一. 执行简单查询的select元素是非常简单的: <select id="selectUser&q ...
- springboot+swagger2
springboot+swagger2 小序 新公司的第二个项目,是一个配置管理终端机(比如:自动售卖机,银行取款机)的web项目,之前写过一个分模块的springboot框架,就在那个框架基础上进行 ...
- Redis常见的应用场景解析
Redis是一个key-value存储系统,现在在各种系统中的使用越来越多,大部分情况下是因为其高性能的特性,被当做缓存使用,这里介绍下Redis经常遇到的使用场景. Redis特性 一个产品的使用场 ...
- touch.js——常见应用操作
touch.js--常见应用操作 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指从屏幕上移开时 ...
- 设计模式学习之“观察者模式” [C#]
<深入浅出设计模式>学习笔记第二章 需求: 开发一套气象监测应用,如图: 气象站,目前有三种装置,温度.湿度和气压感应装置. WeatherData对象追踪气象站的数据,并更新到布告板,布 ...
- Musical Theme poj1743(后缀数组）
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 16757 Accepted: 5739 De ...
- （转）simhash算法原理及实现
simhash是google用来处理海量文本去重的算法. google出品,你懂的. simhash最牛逼的一点就是将一个文档,最后转换成一个64位的字节,暂且称之为特征字,然后判断重复只需要判断他们 ...
- 如何用Django从零开始搭建一个网站（0）
python,django等安装就直接略过了.下面直接奔如主题,搭建网站. Step1:新建一个django project,运行命令:‘django-admin startproject myPit ...