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

    1. 团队课程设计博客链接 http://www.cnblogs.com/kawajiang/p/7062407.html 2.个人负责模块或任务说明 本人主要负责DAO模式.添加和修改学生的信息功能 ...

  2. Ansible系列(一)：基本配置和使用

    本文目录:1.1 安装Ansible1.2 配置Ansible 1.2.1 环境配置 1.2.2 SSH互信配置 1.2.3 简单测试1.3 inventory Ansible是一种批量.自动部署工具 ...

  3. 单例模式（Singleton）看了就懂

    单例,故名思议,一个只能创建一个实例的类. 单例被广泛应用于Spring的bean(默认).线程池.数据库连接池.缓存,还有其他一些无状态的类如servlet. 一个没必要多例的类实现了单例可以节约空 ...

  4. Http协议基本知识简介

    HTTP协议是指超文本传输协议,位于应用层,HTTP规定数据格式,然后用tcp进行传输. 请求响应模式:简单理解为客户端对服务器发起请求,服务器响应客户端. 主要特点 无连接:无连接的含义是限制每次连 ...

  5. 常用git指令

    git checkout -b newBranchName //与当前分支内容相同! git checkout -b 本地分支 origin xxx//远程分支 在本地新建一个分支,并把远程分支的代码 ...

  6. Redis “瘦身”指南

    code[class*="language-"], pre[class*="language-"] { background-color: #fdfdfd; - ...

  7. VB.net shell、IO.File.Open、Process.Start、Shellexecute API 运用经验总结

    打开文件还有很多方法,但我了解到运用较多的是上面几种- -,为了防止以后忘记,先把了解到的写下来. 1.Shell 这个看了很多网页,最靠谱的运用方法: Shell("cmd.exe /c ...

  8. Java面向对象 其他对象

     Java面向对象  其他对象 知识概要:             (1)可变参数 (2)静态导入 (3)System (4)Runtime (5)Date  Calendar (6)Math 本 ...

  9. IDL 矩阵运算

    矩阵相乘,A#B表示A的列乘以B的行,要求A的行数必须跟B的列数一致 IDL> A=[[0,1,2],[3,4,5]] IDL> B=[[0,1],[2,3],[4,5]] IDL> ...

  10. MVC调用部分视图PartialView

    using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Demo2 ...