1、智能分页效果图
模仿的是斗鱼网页端的分页效果,效果如下。学校老师教的分页太low了,所以自己模仿一个以后可以用。
2、代码
1)实体bean,用于方法间的传递
public class PageBean<T> {
private Integer totalPage; //总页数
private Integer currentPage; //当前页数
private Integer totalCount; //总个数
private Integer pageSize; //每页多少条记录
private List<T> list; //数据
//getter and setter function
}
2)业务层封装pageBean对象核心代码
@Override
public PageBean<Message> findAllByPage(int pageSize, int currentPage) throws Exception {
PageBean<Message> pageBean = new PageBean<Message>();
pageBean.setPageSize(pageSize); //设置每页显示多少条
int count = messageDao.findCount();
pageBean.setTotalCount(count); //设置总记录数
int totalPage = (int) Math.ceil(1.0 * count / pageSize);
pageBean.setTotalPage(totalPage); //计算总页数
if(currentPage > totalPage || currentPage <= 0){
currentPage = 1;
}
pageBean.setCurrentPage(currentPage); //设置当前页
int index = (currentPage - 1) * pageSize;
List<Message> messages = messageDao.findByPage(index,pageSize);
pageBean.setList(messages); //设置查询到的记录数
return pageBean;
}
3)view处理数据
控制器将业务层获取的pageBean放入request域中,然后传递给view层对数据进行处理。主要比较复杂就是判断当前页的位置。
①如果总页数就一页,则不显示页码
②如果总页数小于9页,则将全部页码进行显示
③如果总页数大于9页,需要判断当前页码所在的位置。核心代码如下:
/* 分页style */
body{
margin: 0;
}
.spiltPage>a{
text-decoration: none;
display: inline-block;
width: 34px;
height: 26px;
line-height: 26px;
color: #7f7f7f;
text-align: center;
border: 1px solid #d5d5d5;
border-radius: 3px;
margin-left: 5px;
margin-right: 5px;
font-size: 12px;
}
.spiltPage>a:first-child,.spiltPage>a:last-child{
width: 60px;
}
.spiltPage>a:hover{
background: #f70;
color: white;
}
.spiltPage>.selected{
background: #f70;
color: white;
}
.spiltPage>.disable{
cursor: text;
}
.spiltPage{
text-align: center;
padding: 12px;
}
/* 分页style end... */
<!-- 分页 -->
<c:if test="${pageBean.totalPage <= 1 }">
<!-- 不显示分页 -->
</c:if>
<c:if test="${pageBean.totalPage > 1 && pageBean.totalPage <= 9}">
<div class="spiltPage">
<a href="javascript:void(0);" class="disable">上一页</a>
<c:forEach begin="1" end="${pageBean.totalPage }" var="index">
<c:if test="${pageBean.currentPage == index }">
<a href="javascript:void(0);" class="selected">${index }</a>
</c:if>
<c:if test="${pageBean.currentPage != index }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${index }">${index }</a>
</c:if>
</c:forEach>
<a href="javascript:void(0);">下一页</a>
</div>
</c:if>
<c:if test="${pageBean.totalPage > 9}">
<div class="spiltPage">
<!-- 判断是不是首页 -->
<c:if test="${pageBean.currentPage == 1 }">
<a href="javascript:void(0);" class="disable">上一页</a>
</c:if>
<c:if test="${pageBean.currentPage != 1 }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${pageBean.currentPage - 1 }">上一页</a>
</c:if>
<!-- 判断当前页的位置 -->
<c:if test="${pageBean.currentPage - 4 <= 1 }">
<c:forEach begin="1" end="8" var="index">
<c:if test="${pageBean.currentPage == index }">
<a href="javascript:void(0);" class="selected">${index }</a>
</c:if>
<c:if test="${pageBean.currentPage != index }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${index }">${index }</a>
</c:if>
</c:forEach>
<span>...</span>
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${pageBean.totalPage }">${pageBean.totalPage }</a>
</c:if>
<c:if test="${pageBean.currentPage - 4 > 1 && pageBean.currentPage + 4 >= pageBean.totalPage }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/1">1</a>
<span>...</span>
<c:forEach begin="${pageBean.totalPage - 7 }" end="${pageBean.totalPage }" var="index">
<c:if test="${pageBean.currentPage == index }">
<a href="javascript:void(0);" class="selected">${index }</a>
</c:if>
<c:if test="${pageBean.currentPage != index }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${index }">${index }</a>
</c:if>
</c:forEach>
</c:if>
<c:if test="${pageBean.currentPage - 4 > 1 && pageBean.currentPage + 4 < pageBean.totalPage }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/1">1</a>
<span>...</span>
<c:forEach begin="${pageBean.currentPage - 3 }" end="${pageBean.currentPage + 3 }" var="index">
<c:if test="${pageBean.currentPage == index }">
<a href="javascript:void(0);" class="selected">${index }</a>
</c:if>
<c:if test="${pageBean.currentPage != index }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${index }">${index }</a>
</c:if>
</c:forEach>
<span>...</span>
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${pageBean.totalPage }">${pageBean.totalPage }</a>
</c:if>
<!-- 判断是不是尾页 -->
<c:if test="${pageBean.currentPage == pageBean.totalPage }">
<a href="javascript:void(0);" class="disable">下一页</a>
</c:if>
<c:if test="${pageBean.currentPage != pageBean.totalPage }">
<a href="${pageContext.request.contextPath }/messageBoard/${pageBean.pageSize}/${pageBean.currentPage + 1 }">下一页</a>
</c:if>
</div>
</c:if>