jQuery AJAX 分页插件

百威

浏览: 707423 次
来自: ...

最近访客更多访客>>

gaozzsoft

A741841403

Liu.Guo.Zhu

mmmzzc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simplePage</title>
<style type="text/css">
html,body{ margin:0 auto; text-align:center; }
.main{ font:12px/24px "Microsoft YaHei"; height:1000px; }
#page{ margin:100px auto; width:960px; text-align:center; }
#page a{ text-decoration:none; display:inline-block; height:24px; padding:0 8px; border-radius:3px; background-color:#DEF39E; color:#8CAC2C; text-align:center; margin:0 2px; }
#page a:hover,#page .now{ background-color:#8CAC2C; color:#fff; transition:all .5s ease 0s; }
</style>
</head>

<body>
<div class="main">
	<div id="page">
		<!-- 
		<a href="#3">上一页</a>
		<a href="#4">4</a>
		<a href="#5">5</a>
		<a href="#6" class="now">6</a>
		<a href="#7">7</a>
		<a href="#8">8</a>
		<a href="#9">下一页</a>
		 -->
	</div>
	<div class="back"></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">

$(function(){
	$.simplePage({
		obj : "#page",
		current : "now",
		nowNum : 1,
		allNum : 20,
		pageSize : 5,
		callBack : function(now, all){
			$(".back").html(now + "-" + all);
		}
	});
});
/*!
 * jQuery simple page plus v1.1
 * http://www.imsole.net/
 * Author:sole
 * Created:2012/10/31 upd 2013/10/15
*/
$.extend({
	simplePage : function(opt){

		if(!opt.obj){ return false; };
		var obj = $(opt.obj); 
		var cls = opt.current;
		var nowNum = opt.nowNum || 1; 
		var allNum = opt.allNum || 5; 
		var pageSize = opt.pageSize || 5;
		var callBack = opt.callBack || function(){};
		var apd_ele = "";
		var pagecenter = pageSize%2 == 0 ? pageSize/2 : (pageSize+1)/2;
		
		function ele(num, cls){
			var str = "";
			if(cls){
				str = "<a href='#"+num+"' class='"+cls+"'>"+num+"</a>";
			}else{
				str = "<a href='#"+num+"'>"+num+"</a>";
			}
			return str;
		}

		if(nowNum > 1){
			apd_ele = "<a href='#"+ ( nowNum - 1 ) +"'>上一页</a>";
			obj.append(apd_ele);
		}

		if(allNum <= pageSize){
			for(var i=1; i<=allNum; i++){
				if(nowNum == i){
					apd_ele = ele(i, cls);
				}else{
					apd_ele = ele(i);
				}
				obj.append(apd_ele);
			}
		}else{
			for(var i=1; i<=pageSize; i++){
				if(nowNum == 1 || nowNum == 2){
					if(nowNum == i){
						apd_ele = ele(i, cls);
					}else{
						apd_ele = ele(i);
					}
				}else if( (allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){
					if( (allNum - nowNum) == 0 && i == pageSize){
						apd_ele = ele( (allNum - pageSize + i), cls);
					}else if( (allNum - nowNum) == 1 && i == pageSize-1){
						apd_ele = ele( (allNum - pageSize + i), cls);
					}else{
						apd_ele = ele( allNum - pageSize + i );
					}
				}else{
					if(i == pagecenter){
						apd_ele = ele(nowNum-pagecenter+i, cls);
					}else{
						apd_ele = ele(nowNum-pagecenter+i);
					}
				}
				
				obj.append(apd_ele);
			}
		}

		if((allNum - nowNum) >= 1){
			apd_ele = "<a href='#"+ ( nowNum + 1 ) +"'>下一页</a>";
			obj.append(apd_ele);
		}
		
		callBack(nowNum, allNum);

		$("a", obj).click(function(){
			var url = $(this).attr("href");
			var nowNum = url.match(/#\d+/g)+'';
			nowNum = parseInt(nowNum.substring(1));
			obj.html("");
			$.simplePage({
				obj : obj,
				current : cls,
				nowNum : nowNum,
				allNum : allNum,
				pageSize : pageSize,
				callBack :callBack
			});
			return false;
		});
	}
});

</script>
</body>
</html>

分享到：

Java使用memcached | jQuery表格自动增加

2013-12-23 08:37
浏览 561
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery AJAX 分页插件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery AJAX 分页插件

评论

发表评论

相关推荐

easyui+ztree后台管理系统模板

jQuery中$.ajax()和$.getJson()同步处理详解

jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

jquery实现textarea发布框限制文字字数输入(添加中文识别)

jquery实现textarea输入框限制字数的方法

EasyUI创建人员树的实例代码

jquery如何判断checkbox（复选框）是否被选中

利用jQuery简单实现CheckBox全选效果

JQuery 发送Json格式数据

jQuery JSONP跨域

jQuery表格自动增加

juery 插件使用

jquery 开发ajax

jquery 功能函数

jquery 动画特效

jquery控制页面

jquery基础

JQuery 获取和设置Select选项的代码

最近访客更多访客>>