js分页插件


    网络上有很多分页插件,大多都是js动态处理页面跳转,不便于SEO,所以研究了一下相关分页插件,手写了一个便于SEO的js分页插件。

js分页插件


js分页插件


pageUtil.js文件

// 分页组件
var PageUtil = {

    pageFunc: function (curr , totalPage ,url){
		$(".page-div").html("") ;
		var str ;
		if(curr == 1){
			str = "<a href='"+url + curr +"' class='page a_disabled prev'>上一页</a>";
			$(".page-div").append(str);
		} else {
			str = "<a href='"+url + (curr-1) +"' class='page prev'>上一页</a>";
			$(".page-div").append(str);
		}
		if(totalPage <= 7){
			for (i = 1; i <= totalPage; i++) {
				if(curr == i){
					str = "<span class='page currColor'>" + i + "</span>";
					$(".page-div").append(str);
				} else {
					str = "<a href='"+url + i +"' class='page'>" + i + "</a>";
					$(".page-div").append(str);
				}
			}
		} else {
			if(curr ==1){
				str = "<span class='page currColor'>1</span>";
				$(".page-div").append(str);
			} else {
				str = "<a href='"+url + 1 +"' class='page'>1</a>";
				$(".page-div").append(str);
			}
			
			tmp = curr - 2 ;
			if(tmp > (1+1)){
				str = "<span class='page ellipsis'>...</span>";
				$(".page-div").append(str);
			}
			
			if(curr >= totalPage-2){
				tmp = curr - 4 ;
				if(tmp > 1 && tmp >= totalPage-4){
					str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
					$(".page-div").append(str);
				}
				tmp = curr -3 ;
				if(tmp > 1  && tmp >= totalPage-4){
					str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
					$(".page-div").append(str);
				}
			}
			
			tmp = curr - 2 ;
			if(tmp > 1){
				str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
				$(".page-div").append(str);
			}
			
			var tmp = curr -1 ;
			if(tmp > 1){
				str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
				$(".page-div").append(str);
			}
			
			if(curr != 1 && curr != totalPage){
				str = "<span class='page currColor'>"+curr+"</span>";
				$(".page-div").append(str);
			}
			
			tmp = curr + 1 ;
			if(tmp < totalPage){
				str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
				$(".page-div").append(str);
			}
			
			tmp = curr + 2 ;
			if(tmp < totalPage){
				str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
				$(".page-div").append(str);
			}
			
			if(curr <= 3){
				tmp = curr + 3 ;
				if(tmp < totalPage && tmp <=5){
					str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
					$(".page-div").append(str);
				}
				tmp = curr + 4 ;
				if(tmp < totalPage  && tmp <=5){
					str = "<a href='"+url + tmp +"' class='page'>"+tmp+"</a>";
					$(".page-div").append(str);
				}
			} 
			
			tmp = curr + 2 ;
			if(tmp < totalPage-1){
				str = "<span class='page ellipsis'>...</span>";
				$(".page-div").append(str);
			}
			
			if(curr == totalPage){
				str = "<span class='page currColor'>"+totalPage+"</span>";
				$(".page-div").append(str);
			} else {
				str = "<a href='"+url + totalPage +"' class='page'>"+totalPage+"</a>";
				$(".page-div").append(str);
			}
			
		}
		
		if(curr == totalPage){
			str = "<span class='page a_disabled next'>下一页</a>";
			$(".page-div").append(str);
		} else {
			str = "<a href='"+url + (curr + 1) +"' class='page next'>下一页</a>";
			$(".page-div").append(str);
		}
	}
}

css样式 , pageUtil.css

/* 分页工具========================================*/
.page-div{
	margin:20px 0 ;
	text-align:center ;
}
.page-div .page {
	margin: 0;
	padding: 0;
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	padding: 0 15px;
	height: 28px;
	line-height: 28px;
	margin: 0 -1px 5px 0;
	background-color: #FFF;
	color: #333;
	font-size: 12px;
	box-sizing: content-box;
	border: 1px solid #E2E2E2;
	cursor: pointer;
	text-align:center ;
}
.page-div .currColor {
	background-color:#1E9FFF ;
	border-radius: 1px;
	color:#FFF ;
}
.page-div .currColor:hover{
	cursor:default ;
}
.page-div .ellipsis:hover{
	cursor:default ;
}
.page-div .a_disabled {
	pointer-events: none;
	filter: alpha(opacity=40); /*IE滤镜,透明度40%*/
	-moz-opacity: 0.4; /*Firefox私有,透明度40%*/
	opacity: 0.4; /*其他,透明度40%*/
}


在页面中的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="<%=path%>/css/pageUtil.css" media="all">
</head>
<body>

	<div class="page-div"></div>

	<script type="text/javascript" src="<%=path%>/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="<%=path%>/js/pageUtil.js"></script>

	<script type="text/javascript">
		var totalPage = 12; // 总页数
		var curr = 1 ; // 当前页
		var url = "http://localhost/book.html?p=" ; // 跳转路径
		$(function() {
			PageUtil.pageFunc(curr , totalPage ,url) ;
		});
	</script>
</body>
</html>




js 分页插件

2020.11.22 01:03

https://www.meihaocloud.com.com/1022.html , 欢迎转载,请在文章页标出原文连接 !


Copyright © 2020 千夕网 联系站长

粤公网安备 44030302001408号 粤ICP备19099833号-1