ajax的流行导致大部分的分页都是在客户端自己生成，不利于SEO
例如使用js生成分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name='keywords' content='简单的分页' />
<meta name='description' content='简单的分页' />
<title>简单的分页</title>
<style>
*{margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none;}
a:hover,a:active {text-decoration: none; outline:none;}
.page {
font-size: 0;
}
.page a {
display: inline-block;
padding: 0 5px;
font-size: 14px;
margin: 0 2px;
line-height: 22px;
border: 1px solid #ccc;
border-radius: 2px;
}
.page a:hover {
background: #eee;
color: green;
}
.page span {
font-size: 14px;
margin: 0 2px;
line-height: 24px;
}
</style>
</head>
<body style="padding: 50px">
<div class="page">
</div>
<script>
var page = { pageNo: 16, totalPage: 20, url: 'list' }
function createPage(page) {
var pageHtml = ''
if(page.pageNo>1) {
pageHtml += `<a href="${page.url}?pageNo=${page.pageNo-1} ">上一页</a>`
}
if(page.pageNo !=1) {
pageHtml += `<a href="${page.url}?pageNo=1 ">1</a>`
}
if((page.pageNo-3)> 1) {
pageHtml += '<span>…</span>'
}
if((page.pageNo-2)>1) {
pageHtml+=`<a href="${page.url}?pageNo=${page.pageNo-2} ">${page.pageNo-2}</a>`
}
if((page.pageNo-1)>1) {
pageHtml +=`<a href="${page.url}?pageNo=${page.pageNo-1} ">${page.pageNo-1}</a>`
}
if(page.pageNo) {
pageHtml += `<a style="background-color: white; color: black;" href="${page.url}?pageNo=${page.pageNo} ">${page.pageNo}</a>`
}
if(page.totalPage> (page.pageNo+1)) {
pageHtml+= `<a href="list?pageNo=${page.pageNo+1} ">${page.pageNo+1}</a>`
}
if(page.totalPage > (page.pageNo + 2)) {
pageHtml +=`<a href="${page.url}?pageNo=${page.pageNo+2} ">${page.pageNo+2}</a>`
}
if(page.totalPage > (page.pageNo+3)) {
pageHtml+= `<span>…</span>`
}
if(page.pageNo != page.totalPage) {
pageHtml += `<a href="${page.url}?pageNo=${page.totalPage} ">${page.totalPage}</a>`
}
if(page.pageNo<page.totalPage) {
pageHtml +=`<a href="${page.url}?pageNo=${page.pageNo+1} ">下一页</a>`
}
return pageHtml
}
var html = createPage(page)
document.querySelector('.page').innerHTML = html
</script>
</body>
</html>
效果：
image.png
同上面的使用类似，可以将其转换成服务端的分页
例如，下面在 node.js中使用， 模板引擎是 art-template
页面演示代码
<div class="main-content">
{{ set pageData = { pageNo: 16, totalPage: 20, url: '/Product' } }}
{{include './common/pagination.art' pageData }}
</div>
common/pagination.art 样式可以参照上面html页面的调整
<div class="page">
{{if pageNo > 1 }}
<a href="{{url}}?pageNo={{pageNo-1}}">上一页</a>
{{/if}}
{{if pageNo != 1 }}
<a href="{{url}}?pageNo=1">1</a>
{{/if}}
{{if (pageNo-3) > 1 }}
<span>…</span>
{{/if}}
{{if (pageNo-2) > 1 }}
<a href="{{url}}?pageNo={{pageNo-2}} ">{{pageNo-2}}</a>
{{/if}}
{{if (pageNo-1) > 1 }}
<a href="{{url}}?pageNo={{pageNo-1}}">{{pageNo-1}}</a>
{{/if}}
{{if pageNo != null}}
<a style="background-color: white; color: black;" href="{{url}}?pageNo={{pageNo}}">{{pageNo}}</a>
{{/if}}
{{if totalPage > (pageNo+1)}}
<a href="{{url}}?pageNo={{pageNo+1}}">{{pageNo+1}}</a>
{{/if}}
{{if totalPage > (pageNo+2)}}
<a href="{{url}}?pageNo={{pageNo+2}}">{{pageNo+2}}</a>
{{/if}}
{{if totalPage > (pageNo+3)}}
<span>…</span>
{{/if}}
{{if pageNo != totalPage }}
<a href="{{url}}?pageNo={{totalPage}}">{{totalPage}}</a>
{{/if}}
{{if pageNo < totalPage }}
<a href="{{url}}?pageNo={{pageNo+1}}">下一页</a>
{{/if}}
</div>
网友评论