js分页插件
网络上有很多分页插件，大多都是js动态处理页面跳转，不便于SEO，所以研究了一下相关分页插件，手写了一个便于SEO的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>
