javaWeb智能分页

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>

猜你喜欢

转载自blog.csdn.net/qq_32587949/article/details/81237556
今日推荐