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

    前一篇发布出来之后,我看着阅读量还是挺多的,就是评论和给意见的一个都没有,或许各位看官就跟我一样,看帖子从不回复,只管看就行了.毕竟大家都有公务在身,没太多时间,可以理解.不过没关系,我是不是可以直接 ...

  2. 转 Java输入输出流详解（非常详尽）

    转  http://blog.csdn.net/zsw12013/article/details/6534619 通过数据流.序列化和文件系统提供系统输入和输出. Java把这些不同来源和目标的数据都 ...

  3. Java面试准备

    今天我们会分为四个部分来谈论这个问题,由于我本身是Java出身,因此关于主语言的问题,都是与Java相关,其它语言的同学可以选择性忽略.此外,面试的时候一般面试官的问题都是环环相扣,逐渐深入的,这点在 ...

  4. OC——继承

    继承的其中一个很重要的目的是为了实现多态.我们现在先来看看OC的继承. 一.继承 父类: 头文件 // // Peason.h // 01-继承和多态 // // Created by zhangji ...

  5. Opengl4.5 中文手册—A

    因为opengl API 比较庞大,网络上还没有完整的.较新的opengl中文手册 这对很多人很不方便,所以整理了这一系列,用于帮助大家"快速浏览最新的opengl api" 为了 ...

  6. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  7. HDU 5976 数学

    Detachment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  8. Problem 2144 Shooting Game fzu

    Problem 2144 Shooting Game Accept: 99    Submit: 465Time Limit: 1000 mSec    Memory Limit : 32768 KB ...

  9. 我的第一个python web开发框架（5）——开发前准备工作（了解编码前需要知道的一些常识）

    中午吃饭时间到了,小白赶紧向老菜坐的位置走过去. 小白:老大,中午请你吃饭. 老菜:哈哈...又遇到问题了吧,这次得狠狠宰你一顿才行. 小白:行行行,只要您赏脸,米饭任吃,嘻嘻,我们边走边聊. ... ...

  10. Python自学笔记-关于切片（来自廖雪峰的官网Python3）

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看. 切片 L[0: ...