这几天做毕业设计的时候需要使用到一个异步分页的功能，即翻页的时候只是刷新分页的数据而不是刷新整个页面。因为之前做项目的时候没有做过这方面的功能，所以还是纠结了挺长时间的，在网上也找了很多资料，结合自己的理解，做了一个比较简单的异步分页数据显示功能，这里使用的是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. 关于SVM数学细节逻辑的个人理解（三） ：SMO算法理解

    第三部分:SMO算法的个人理解 接下来的这部分我觉得是最难理解的?而且计算也是最难得,就是SMO算法. SMO算法就是帮助我们求解: s.t.   这个优化问题的. 虽然这个优化问题只剩下了α这一个变 ...

  2. JavaSE（十）之Collection总结

    前面几篇把集合中的知识大概都详细的说了一遍,但是我觉得还是要总结一下,这样的话,可以更好的理解集合. 一.Collection接口 首先我们要一张图来说明: Collection接口,它是集合的顶层接 ...

  3. php使用ZipArchive压缩文件的心得

    $zip=new ZipArchive; if($zip->open('test.zip',ZipArchive::CREATE)===TRUE){ $zip->addFile('imag ...

  4. 网络基础之IP地址与子网划分

    IP地址 Ipv4地址格式:点分十进制 IP地址的分类 A类 B类 C类: D类:组播 E类: 公共IP地址 私有IP地址 特殊地址 保留地址 子网掩码 什么是子网掩码 CIDR表示法 子网划分 为啥 ...

  5. headfirst设计模式（3）—装饰者模式

    序 好久没写设计模式了,自从写了两篇之后,就放弃治疗了,主要还是工作太忙了啊(借口,都是借口),过完年以后一直填坑,填了好几个月,总算是稳定下来了,可以打打酱油了. 为什么又重新开始写设计模式呢?学习 ...

  6. Python学习笔记008_类_对象_继承_组合_类相关的BIF

    # 对象 = 属性 + 方法>>> # Python中的类名约定以大写字母开始>>> # tt = Turtle() 这就是创建类实例的方法,其它语言用new ,它 ...

  7. Shiro初识与总结

    1.1简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码学和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序 ...

  8. 关于maven项目的一些报错问题

    本文为自己记录的笔记略显粗糙后续会把遇到的问题追加进来.忘大神多指点 1.父工程红色感叹号 此类问题解决方法,一般打开pom文件查看红色标记处是否有报错,也就是看哪个jar包没有下下来.分为两种情况. ...

  9. CSS公用

    *{font-size: 100px;} body,span,h1,h2,h3,h4,h5,h6,li,ul,p,em,strong,ol,form,pre,input,article,header, ...

  10. mybatis入门篇基——基本配置与参数说明

    Mybatis 好吧这是我第一次写这种文章~如果有不足和错误之处欢迎评论,指点.今天想谈谈关于mybatis的一些基础入门知识. 进入正题~~: a.关于mybatis: 我个人觉得mybatis深得 ...