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

    Java 源文件(.java)   使用 Java编译器(javac.exe)编译 生成 java字节码文件(.class) 使用 解释执行器(java.exe) 将字节码文件加载到java虚拟机(j ...

  2. Eclipse rap 富客户端开发总结(8) ： 发布到tomcat后解决rap编码和字符集的问题

    1 .解决 rap 字符集乱码的问题 字符集问题,解决办法:   在plugin.xml - build.properties 中添加 javacDefaultEncoding.. = UTF-8   ...

  3. 2017年9月19日 JavaScript语法操作

    关于JavaScript个人还是觉得比较有意思的 {在</html>后面写或者在</body>前面写(必须紧贴</body>)} <script> va ...

  4. Spring Boot Maven Plugin（一）：repackage目标

    简介 Spring Boot Maven Plugin插件提供spring boot在maven中的支持.允许你打包可运行的jar包或war包. 插件提供了几个maven目标和Spring Boot ...

  5. Java中数组的概念

    1.什么是二维数组?有几种表达方式?分别是什么? 答:多维数组即数组的数组,即数组的元素也是数组. 例:int[] [] a = {{1},{1,2},{1,2,3}}; 有三种方式 1).int [ ...

  6. Chrome控制台选择器简介

    Chrome的控制台是支持用$来获取元素的,这点可能是很多人不知道的.本篇文章将会简单介绍怎样更好的来使用这种快捷方式来获取元素. 判断当前窗口的$是来自谁的 我们知道jQ里面经常使用$来进行元素选择 ...

  7. 从Leetcode的Combination Sum系列谈起回溯法

    在LeetCode上面有一组非常经典的题型--Combination Sum,从1到4.其实就是类似于给定一个数组和一个整数,然后求数组里面哪几个数的组合相加结果为给定的整数.在这个题型系列中,1.2 ...

  8. oracle数据库使用心得之与SQL serve数据库的差异

    网上对于SQL数据库的使用比较详细,但是对于Oracle的使用比较少,本文特别适合学过SQL数据库但是工程需要使用Oracle数据的编程人员查看, 时间匆忙,文章可能写得不够详细,希望有人指出错误或者 ...

  9. 详解 HTTPS 移动端对称加密套件优

    近几年,Google.Baidu.Facebook 等互联网巨头大力推行 HTTPS,国内外的大型互联网公司很多也都已启用全站 HTTPS. Google 也推出了针对移动端优化的新型加密套件 Cha ...

  10. jQuery插件：Ajax将Json数据自动绑定到Form表单

    jQuery注册方法的两种常用方式: //jQuery静态方法注册 //调用方法$.a1() $.extend({ a1: function () { console.log("a1&quo ...