这几天做毕业设计的时候需要使用到一个异步分页的功能，即翻页的时候只是刷新分页的数据而不是刷新整个页面。因为之前做项目的时候没有做过这方面的功能，所以还是纠结了挺长时间的，在网上也找了很多资料，结合自己的理解，做了一个比较简单的异步分页数据显示功能，这里使用的是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']+"&nbsp;"+array['name']+"&nbsp;"+array['num']+"&nbsp;"+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实现异步分页数据显示的更多相关文章

  1. jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法

    jquery ajax success 函数 异步调用方法中不能给全局变量赋值的原因及解决办法   在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们 ...

  2. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  3. jquery ajax json简单的分页，模拟数据，没有封装，只显示原理

    简单的分页,模拟数据,没有封装,显示原理,大家有兴趣可以自己封装,这里只是个原理过程,真正的分页也差不多是这个原理,只是请求数据不太一样,html部分: <!TOCTYPE HTML> & ...

  4. jQuery+Ajax+PHP+Mysql实现分页显示数据

    css <style type="text/css"> #loading{ position: absolute; top: 200px; left:400px; } ...

  5. Jquery+Ajax+Bootstrap Paginator实现分页的拼接

    效果图如下 jsp页面引入bootstrap样式,jquery和bootstrap-paginator.js <link type="text/css" rel=" ...

  6. jQuery Ajax async=>false异步改为同步时，导致浏览器假死的处理方法

    今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** * 异步当前用户 ...

  7. jQuery+AJAX实现纯js分页功能

    使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的.这次只是拿来作为网页元素的css样式表使用 ...

  8. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  9. jQuery+Ajax滚屏异步加载数据实现（附源码）

    一.CSS样式 body { font:12px/1.0em Microsoft Yahei; line-height:1.6em; background:#fff; line-height:1.2e ...

随机推荐

  1. 201521123099 《Java程序设计》第13周学习总结

    本周学习总结 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 telnet bbs. ...

  2. mybatis教程：入门>>精通>>实战

    以前曾经用过ibatis,这是mybatis的前身,当时在做项目时,感觉很不错,比hibernate灵活.性能也比hibernate好.而且也比较轻量级,因为当时在项目中,没来的及做很很多笔记.后来项 ...

  3. centOS 7一个解决“network.service: control process exited, code=exited status=1”方法

    今天早上2017-08-04,我打开虚拟机,使用远程工具xshell对虚拟机进行连接,我发现连接不上去,然后我ifconfig,发现找不到ens33了,就剩一个本地回环,看来是我的网络出现了问题,然后 ...

  4. dotnet core 2.0在ubuntu下安装失败

    在ubuntu下安装.net core2.0失败了,不知道是什么原因.按照微软官方的步骤.似乎走不通.偶然翻到debian的安装方法,发现debian系统居然是直接下载包安装的.没经过apt.尝试一把 ...

  5. Hadoop的safeMode

    当集群启动的时候,会首先进入到安全模式.系统在安全模式下,会检查数据块的完整性.假设我们设置的副本数(即参数dfs.replication)是5,那么在dataNode上就应该有5个副本存在,假设只存 ...

  6. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  7. C#中的两把双刃剑：抽象类和接口

    问题出现: 这也是我在学习抽象类和接口的时候遇到的问题,从我归纳的这三个问题,不难看出这也许是我们大多数程序员遇到问题的三个阶段, 第一阶段(基础概念):就象问题1一样,这部分人首先需要扫清基础概念的 ...

  8. js Date() 浏览器兼容问题解决

    一般 直接new Date() 是不会出现兼容性问题的,而 new Date(datetimeformatstring) 常常会出现浏览器兼容性问题,为什么,datetimeformatstring中 ...

  9. uva1267 Network

    https://vjudge.net/problem/UVA-1267 题意: 有一棵树,上面有一个放着水源的点s,给出一个数k,这个水源可以覆盖路径长度到s不超过k的叶子节点.现在需要把所有的叶子节 ...

  10. TCP/IP（七）之玩转HTTP协议

    前言 前面一篇的博文简单的介绍了一下属于应用层的HTTP协议,这一篇我将详细的学习HTTP协议,这也是做Web开发中一定要用到的协议.虽然我是做大数据的,但是多学习一点肯定是 没有坏处的.国庆放假7天 ...