jQuery+Ajax+PHP实现异步分页数据显示

最新推荐文章于 2021-03-18 09:28:33 发布

67snow

最新推荐文章于 2021-03-18 09:28:33 发布

阅读量423

点赞数

分类专栏：后端前端文章标签：异步分页分页手写分页

后端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

前端

5 篇文章 0 订阅

订阅专栏

怕链接失效，原文地址：https://www.cnblogs.com/wujuntian/p/5005006.html

jQuery+Ajax+PHP实现异步分页数据显示 - 编程人，在天涯 - 博客园

编程人，在天涯

</div><!--end: blogTitle 博客的标题和副标题 -->

		<div class="blogStats">
			
			<div id="blog_stats">

随笔- 177
文章- 0
评论- 28

		</div><!--end: blogStats -->
	</div><!--end: navigator 博客导航栏 -->
	
    <div id="post_detail">

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 += “<a href=‘javascript:turnPage(1)’>首页</a>”;
pageBar += “<a href='javascript:turnPage(”+(curPage-1)+")’><<</a>";
}

//显示的页码按钮(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 += “<a href='javascript:turnPage(”+i+")’>"+i+"</a>";
} else {
pageBar += “<a href='javascript:turnPage(”+i+")’>"+i+"</a>";
}
}

//如果不是最后页
if(curPage != totalPage){
pageBar += “<a href='javascript:turnPage(”+(parseInt(curPage)+1)+")’>>></a>";
pageBar += “<a href='javascript:turnPage(”+totalPage+")’>尾页</a>";
}

$("#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')-&gt;limit($startItem,$pageSize)-&gt;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. 实现效果：

（总是显示五个数字页面按钮，数字跟着当前所在页面变化）

　　其实，异步分页的应用还是挺广泛的，有些应用并不是很明显地看上去就是数据分页，但本质上还是异步分页，例如：一些网站上的“换一批”功能，其实就是异步分页的变形，我们只要把分页按钮栏的规则和显示效果修改一下就可以轻松实现了！！！

	</div>
	<div class = "postDesc">posted @ <span id="post-date">2015-11-29 17:02</span> <a href='https://www.cnblogs.com/wujuntian/'>编程人，在天涯</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>)  <a href ="https://i.cnblogs.com/EditPosts.aspx?postid=5005006" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(5005006);return false;">收藏</a></div>
</div>
<script type="text/javascript">var allowComments=true,cb_blogId=224189,cb_entryId=5005006,cb_blogApp=currentBlogApp,cb_blogUserGuid='cc39b5db-18e7-e411-b908-9dcfd8948a71',cb_entryCreatedDate='2015/11/29 17:02:00';loadViewCount(cb_entryId);var cb_postType=1;var isMarkdown=false;</script>

</div><!--end: forFlow -->
</div><!--end: mainContent 主体内容容器-->

<div id="sideBar">
	<div id="sideBarMain">

公告

		<div id="calendar"><div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script></div>
		
		<DIV id="leftcontentcontainer">
			<div id="blog-sidecolumn"></div><script type="text/javascript">loadBlogSideColumn();</script>
		</DIV>
		
	</div><!--end: sideBarMain -->
</div><!--end: sideBar 侧边栏容器 -->
<div class="clear"></div>
</div><!--end: main -->
<div class="clear"></div>
<div id="footer">

67snow

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery+Ajax+PHP实现异步分页数据显示

怕链接失效，原文地址：https://www.cnblogs.com/wujuntian/p/5005006.html jQuery+Ajax+PHP实现异步分页数据显示 - 编程人，在天涯 - 博客园编程人，在天涯</div><!--end: blogTitle...
复制链接

扫一扫

专栏目录