最简单的分页功能

WsilenceY · Aug 9, 2017 · aa932ee · aa932ee
commit aa932ee
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/dome.html b/dome.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>pagination demo</title>
+	<link rel="stylesheet" type="text/css" href="./pagination.css">
+</head>
+<body>
+
+<div id="page"></div>
+
+<script type="text/javascript" src="./jquery.js"></script>
+<script type="text/javascript" src="./pagination.js"></script>
+<script type="text/javascript">
+	$(function(){
+		$(function(){
+			$("#page").Pagination({
+		          all: 14,//分页总数
+		          activeClass: 'activPage', //active 类样式定义
+		          callback : function(p){
+		          		console.log('当前第'+p+'页');
+		          }
+      		});
+		})
+	})
+</script>
+</body>
+</html>
diff --git a/jquery.js b/jquery.js
diff --git a/pagination.css b/pagination.css
@@ -0,0 +1,47 @@
+#page-content > a{
+	display: inline;
+	height: 30px;
+	width: auto;
+	border: 1px solid #eaeaea;
+	text-decoration: none;
+	color: #2196f3;
+	padding: 10px;
+	font-size: 14px;
+	line-height: 30px;
+	color: #fff;
+}
+.cur{
+	border: none;
+}
+.cur > a{
+	color: #000;
+	text-decoration: none
+}
+.pagingUl > li{
+	display: inline-block;
+	list-style: none;
+	line-height: 35px;
+	text-align: center;
+	margin-right: 15px;
+}
+
+.pagingUl > .btn >a{
+	text-decoration: none;
+	color: #fff
+}
+.btn{
+	cursor: pointer;
+	color:#fff;
+	background-color: rgb(32, 160, 255);
+	border: none;
+	border: 1px solid #eaeaea;
+	width: 80px;
+	height: 35px;
+	display: inline-block;
+	list-style: none;
+	line-height: 35px;
+	text-align: center;
+	margin-right: 15px;
+}
+
+
diff --git a/pagination.js b/pagination.js
@@ -0,0 +1,62 @@
+(function($){
+	var defaultData = {
+		current : 1,//当前页
+			all : 10,//数据总数
+			current:1,
+			nextBtnName:'下一页',
+			preBtnName:'上一页',
+			callback:function(){//回调函数
+
+			}
+	}
+	//插件名称
+	$.fn.Pagination = function(options){
+		var _this_ = this;
+		//覆盖默认参数
+		var opts = $.extend(defaultData,options);
+		return this.each(function(){
+			var $el = $(this);
+			var allNum = opts.all;
+			var activeClass = opts.activeClassName; 
+			//初始化布局
+			var currentStr = '<li class="cur"><a href="javascript:" >第'+opts.current+'页/共'+opts.all+'页</a></li>';
+			var nextBtnStr = '<li class="next btn"><a href="javascript:" >'+opts.nextBtnName+'</a></li>';
+			var preBtnStr = '<li class="pre btn"><a href="javascript:" >'+opts.preBtnName+'</a></li>';
+			var contentStr = '<ul class="pagingUl">' +  preBtnStr  + currentStr + nextBtnStr + '</ul>';
+
+			$el.html(contentStr);
+			$el.on('click','.next',function(){
+				if(opts.current === opts.all){
+					console.log('----最后一页啦——————')
+				}else{
+					opts.current ++;
+					opts.callback(opts.current);
+					pageLayout();
+				}
+				pageLayout()
+			});
+
+			$el.on('click','.pre',function(){
+				if(opts.current === 0){
+					console.log('--一前面没有啦——————')
+				}else{
+					opts.current --;
+					opts.callback(opts.current);
+					pageLayout();
+				}
+
+			});
+
+			//重新渲染结构
+			function pageLayout(){
+			 	currentStr = '<li class="cur"><a href="javascript:" >第'+opts.current+'页/共'+opts.all+'页</a></li>';
+				 nextBtnStr = '<li class="next btn"><a href="javascript:" >'+opts.nextBtnName+'</a></li>';
+				 preBtnStr = '<li class="pre btn"><a href="javascript:" >'+opts.preBtnName+'</a></li>';
+				contentStr = '<ul class="pagingUl">' +  preBtnStr  + currentStr + nextBtnStr + '</ul>';
+				$el.html(contentStr);
+			}
+
+		});
+
+	}
+})(jQuery);