分页优化这东西原来我也不太明白，不知道这东西还需要什么优化的，但是经理跟我说，搜索引擎好像是不能收录其他分页的列表数据，说这是SEO优化，让我将分页修改成安居客的方式。
先说说layer插件和安居客分页的方式不同：
1、首先layer的插件的样式如下：
<div id="layPage" align="center">
<div name="laypage1.3" class="laypage_main laypageskin_molv" id="laypage_0">
<span class="laypage_curr" style="background-color:#ff6600">1</span>
<a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a>
<a href="javascript:;" data-page="4">4</a><a href="javascript:;" data-page="5">5</a>
<span>…</span>
<a href="javascript:;" class="laypage_last" title="尾页" data-page="265">尾页</a>
<a href="javascript:;" class="laypage_next" data-page="2">下一页</a></div>
</div>
1.1、安居客的分页样式如下：
<div class="pagination">
<span class="prev-page stat-disable">上一页</span>
<span class="curr-page">1</span>
<a href="https://sh.fang.anjuke.com/loupan/all/p2/">2</a>
<a href="https://sh.fang.anjuke.com/loupan/all/p3/">3</a>
<a href="https://sh.fang.anjuke.com/loupan/all/p4/">4</a>
<a href="https://sh.fang.anjuke.com/loupan/all/p5/">5</a>
<a href="https://sh.fang.anjuke.com/loupan/all/p6/">6</a>
<a href="https://sh.fang.anjuke.com/loupan/all/p7/">7</a>
<span class="ellipsis">...</span>
<a href="https://sh.fang.anjuke.com/loupan/all/p2/" class="next-page next-link">下一页</a>
</div>
--------------------------------------------------------我是Controller方法---------------------------------------------------------
page: (当前页，每页数量，总数)；
condition: 查询条件
page.setPageContainer(PageUtil.layerPage(page,condition));
--------------------------------------------------------我是Util 方法---------------------------------------------------------
package test.core.util;
import test.common.WebConstants;
public class PageUtil {
public static int getPageSize(int count, int numberOfPage) {
int result = 0;
// 记录条数小于0时
if (count <= 0) {
return 0;
}
// 计算页数
result = count / numberOfPage;
// 下一页还存在记录时(未满一页)，页数加1
if (count % numberOfPage != 0) {
result++;
}
return result;
}
public static int getOffset(int currentPage, int numberOfPage) {
int offset = 0;
if (currentPage > 0) {
offset = (currentPage - 1) * numberOfPage;
}
return offset;
}
/**
* 分页参数错误处理
* @param currentPage 当前页
* @param pageSize 每页个数
*/
public static void handleError(Integer currentPage, int pageSize) {
//若当前页参数为空或为0时，取第一页
if (currentPage == null || currentPage <= 0) {
currentPage = 1;
//若当前页大于总页数，取最大页
} else if (currentPage > pageSize) {
currentPage = pageSize;
}
}
/**
* TODO(生成分页方法)
* @author 作者 E-mail <a href="mailto:[email protected]"shangxy</a>
* @version 1.0 创建时间：2017年7月3日下午6:03:19
* @param page （总数，每页个数，当前页，拼接城的分页）
* @param condition 查询条件
* @return String
*/
public static String layerPage(Page page,String condition){
//分页总数
int pageTotal = (int) Math.ceil(((double) page.getTotalRowSize()/(double) page.getPageRowSize()));
//(这里要做判断，只有页数超过2页时才生成分页，调用分页方法)
if(pageTotal<2){
return "";
}
// url地址
String web = WebConstants.CURRENT_WEB_CONTENT_PATH;
String layer="<div class='laypage_main laypageskin_molv'>";
/* 判断是否是第一页，如果不是那么就存在上一页和首页 */
if(page.getCurrPageNum()!=1){
layer+="<a href="+web+condition+"lg"+(page.getCurrPageNum()-1)+">上一页</a>";
}
//总数为1到5页
if(1< pageTotal && pageTotal<6){
for (int i = 1; i <= pageTotal; i++) {
if(i==page.getCurrPageNum()){
layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";
}else{
layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";
}
}
}else{ /* 分页总数大于6时处理 */
if(page.getCurrPageNum()>3){ /* 判断当前页是否是前三页以外，如果是则存在首页 */
layer +="<a href="+web+condition+"lg1"+" class='laypage_first' title='首页'>首页</a>";
}
/* 判断当前的位置，是否在末尾3页 和首页前三页 之间 */
if(page.getCurrPageNum()>3 && (2<(pageTotal - page.getCurrPageNum()))){
layer+="<span>…</span>";
for (int i = (page.getCurrPageNum()-2); i <= (page.getCurrPageNum()+2); i++) {
if(i==page.getCurrPageNum()){
layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";
}else{
layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";
}
}
layer+="<span>…</span>";
}else if ((pageTotal - page.getCurrPageNum())<=2) { /* 判断当前的位置，是否在末尾三页之内 */
layer+="<span>…</span>";
for (int i = (pageTotal-4); i <= pageTotal; i++) {
if(i==page.getCurrPageNum()){
layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";
}else{
layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";
}
}
}else {
/* 判断当前的位置在首页5页之内 */
for (int i = 1; i <= 5; i++) {
if(i==page.getCurrPageNum()){
layer +="<span class='laypage_curr' style='background-color:#ff6600'>"+i+"</span>";
}else{
layer+="<a href="+web+condition+"lg"+i+">"+i+"</a>";
}
}
layer+="<span>…</span>";
}
/* 判断是最后三页以外，以外存在尾页 */
if(2<(pageTotal - page.getCurrPageNum())){
layer +="<a href="+web+condition+"lg"+pageTotal+" class='laypage_last' title='尾页' >尾页</a>";
}
}
/* 判断是否是最后一页，如果不是那么就存在下一页和尾页 */
if(page.getCurrPageNum()!=pageTotal){
layer +="<a href="+web+condition+"lg"+(page.getCurrPageNum()+1)+">下一页</a>";
}
return layer;
}
}
--------------------------------------------------------我是page JSP的方法---------------------------------------------------------
<!-- page分页容器 -->
<div align="center" class="page">${page.pageContainer}</div>
--------------------------------------------------------我是static CSS的方法---------------------------------------------------------
.laypage_main a, .laypage_main input, .laypage_main span {
height: 26px;
line-height: 26px
}
.laypage_main button, .laypage_main input, .laypageskin_default a {
border: 1px solid #ccc;
background-color: #fff
}
.laypage_main {
font-size: 0;
clear: both;
color: #666
}
.laypage_main * {
display: inline-block;
vertical-align: top;
font-size: 12px
}
.laypage_main a {
text-decoration: none;
color: #666
}
.laypage_main a, .laypage_main span {
margin: 0 3px 6px;
padding: 0 10px
}
.laypage_main input {
width: 40px;
margin: 0 5px;
padding: 0 5px
}
.laypage_main button {
height: 28px;
line-height: 28px;
margin-left: 5px;
padding: 0 10px;
color: #666
}
.laypageskin_default span {
height: 28px;
line-height: 28px;
color: #999
}
.laypageskin_default .laypage_curr {
font-weight: 700;
color: #666
}
.laypageskin_molv a, .laypageskin_molv span {
padding: 0 12px;
border-radius: 2px
}
.laypageskin_molv a {
background-color: #f1eff0
}
.laypageskin_molv .laypage_curr {
background-color: #00AA91;
color: #fff
}
.laypageskin_molv input {
height: 24px;
line-height: 24px
}
.laypageskin_molv button {
height: 26px;
line-height: 26px
}
.laypageskin_yahei {
color: #333
}
.laypageskin_yahei a, .laypageskin_yahei span {
padding: 0 13px;
border-radius: 2px;
color: #333
}
.laypageskin_yahei .laypage_curr {
background-color: #333;
color: #fff
}
.laypageskin_flow {
text-align: center
}
.laypageskin_flow .page_nomore {
color: #999
}