分页插件2-当总页数大于一页的时候才显示分页

最新推荐文章于 2022-05-05 09:51:35 发布

dongsdh

最新推荐文章于 2022-05-05 09:51:35 发布

阅读量790

点赞数

分类专栏：第三方-分页

本文链接：https://blog.csdn.net/dongsdh/article/details/88815952

版权

第三方-分页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言：

之前的分页有个问题在于，当总页数只有一页的时候，也显示了这个分页

所以要前台判断总页数，大于一页或等于一页时候，分别显示隐藏分页

现在把这个判断放在封装好的函数里，前台就不用判断了，直接使用

等于一页的时候，不显示分页，大于一页的时候，显示分页

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>分页</title>
	<style type="text/css">
		.pages{text-align: center;}
		.page_div {
				margin-top: 20px;
				margin-bottom: 20px;
				font-size: 15px;
				font-family: "microsoft yahei";
				color: #666666;
				margin-right: 10px;
				padding-left: 20px;
				box-sizing: border-box;
			}
			/*
			 * 页数按钮样式
			 */
			
			.page_div a {
				min-width: 40px;
				border: 1px solid #E3E3E3;
			    height: 40px;
			    text-align: center;
			    margin: 0 4px;
			    cursor: pointer;
			    line-height: 40px;
			    border-radius: 4px;
			    font-size: 13px;
			    display: inline-block;
			}
			.page_div a:hover{
				background: #008C5F;
				color: #fff;
			}
			
			#firstPage,
			#lastPage {
				width: 50px;
				/*color: #0073A9;*/
				/*border: 1px solid #0073A9!important;*/
			}
			
			#prePage,
			#nextPage {
				width: 70px;
				/*color: #0073A9;*/
				/*border: 1px solid #0073A9!important;*/
			}
			
			.page_div .current {
				    background-color: #008C5F;
				    border-color: #0073A9;
				    color: #FFFFFF;
			}
			
			.totalPages {
				margin: 0 10px;
			}
			
			.totalPages span,
			.totalSize span {
				color: #0073A9;
				margin: 0 5px;
			}
	</style>
</head>
<body>
	<p>分页</p>
	<!--分页-->
	<div class="pages">
		<div value="1 0"></div>
		<div id="page" class="page_div"></div>
	</div>
	<script src="jquery.min.js"></script>
	<script src="paging.js"></script>
	<script type="text/javascript">
		
//		$("#page").paging({
//			pageNo:1,
//			totalPage: 1,
//			callback: function(num) {
//				console.log(num)
//			}
//		})
		$("#page").paging({
			pageNo:1,
			totalPage: 13,
			callback: function(num) {
				console.log(num)
			}
		})
		
		
		
		/*
		// 模拟ajax数据用以下方法
		//参数为当前页
		ajaxTest(1);
		
		function ajaxTest(num) {
			$.ajax({
				url: "table.json",
				type: "get",
				data: {},
				dataType: "json",
				success: function(data) {
					console.log(data);
					//分页
					$("#page").paging({
						pageNo: num,
						totalPage: data.totalPage,
						totalSize: data.totalSize,
						callback: function(num) {
							ajaxTest(num)
						}
					})
				}
			})
		}
		*/
	</script>
</body>
</html>

引入的paging.js

(function($, window, document, undefined) {
	//定义分页类
	function Paging(element, options) {
		this.element = element;
		//传入形参
		this.options = {
			pageNo: options.pageNo||1,
			totalPage: options.totalPage,
			totalSize:options.totalSize,
			callback:options.callback
		};
		//根据形参初始化分页html和css代码
		this.init();
	}
	//对Paging的实例对象添加公共的属性和方法
	Paging.prototype = {
		constructor: Paging,
		init: function() {
			this.creatHtml();
			this.bindEvent();
		},
		creatHtml: function() {
			var me = this;
			var content = "";
			var current = me.options.pageNo;
			var total = me.options.totalPage;
			var totalNum = me.options.totalSize;
			content += "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
			//总页数大于6时候
			if(total > 6) {
				//当前页数小于5时显示省略号
				if(current < 5) {
					for(var i = 1; i < 6; i++) {
						if(current == i) {
							content += "<a class='current'>" + i + "</a>";
						} else {
							content += "<a>" + i + "</a>";
						}
					}
					content += ". . .";
					content += "<a>"+total+"</a>";
				} else {
					 //判断页码在末尾的时候
					if(current < total - 3) {
						for(var i = current - 2; i < current + 3; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a>" + i + "</a>";
							}
						}
						content += ". . .";
						content += "<a>"+total+"</a>";
					//页码在中间部分时候	
					} else {
						content += "<a>1</a>";
						content += ". . .";
						for(var i = total - 4; i < total + 1; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a>" + i + "</a>";
							}
						}
					}
				}
				//页面总数小于6的时候
			} else {
				for(var i = 1; i < total + 1; i++) {
					if(current == i) {
						content += "<a class='current'>" + i + "</a>";
					} else {
						content += "<a>" + i + "</a>";
					}
				}
			}
			content += "<a id='nextPage'>下一页</a>";
			content += "<a id=\"lastPage\">尾页</a>";
			content += "<span class='totalPages'> 共<span>"+total+"</span>页 </span>";
//			content += "<span class='totalSize'> 共<span>"+totalNum+"</span>条记录 </span>";
			if(total>1){
				me.element.html(content);
			}
		},
		//添加页面操作事件
		bindEvent: function() {
			var me = this;
			me.element.off('click', 'a');
			me.element.on('click', 'a', function() {
				var num = $(this).html();
				var id=$(this).attr("id");
				if(id == "prePage") {
					if(me.options.pageNo == 1) {
						me.options.pageNo = 1;
					} else {
						me.options.pageNo = +me.options.pageNo - 1;
					}
				} else if(id == "nextPage") {
					if(me.options.pageNo == me.options.totalPage) {
						me.options.pageNo = me.options.totalPage
					} else {
						me.options.pageNo = +me.options.pageNo + 1;
					}
 
				} else if(id =="firstPage") {
					me.options.pageNo = 1;
				} else if(id =="lastPage") {
					me.options.pageNo = me.options.totalPage;
				}else{
					me.options.pageNo = +num;
				}
				me.creatHtml();
				if(me.options.callback) {
					me.options.callback(me.options.pageNo);
				}
			});
		}
	};
	//通过jQuery对象初始化分页对象
	$.fn.paging = function(options) {
		return new Paging($(this), options);
	}
})(jQuery, window, document);

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页插件2-当总页数大于一页的时候才显示分页

前言：之前的分页有个问题在于，当总页数只有一页的时候，也显示了这个分页所以要前台判断总页数，大于一页或等于一页时候，分别显示隐藏分页现在把这个判断放在封装好的函数里，前台就不用判断了，直接使用等于一页的时候，不显示分页，大于一页的时候，显示分页<!DOCTYPE html><html lang="zh"&...
复制链接

扫一扫