分页 -- a标签点击分页
实体类
public class Pagination {
private int totalCount;//总条数
private String pageSize = 10;//一页多少条
private String page;//第几页
private int totalPage;//总页数
private int startPage;//开始条查
private int endPage;//结束条
private String curPage;//当前页
//get set 方法
}
controller
public ModelAndView findPage(HttpServletRequest request,HttpServletResponse response){
Pagination page = new Pagination();
int pageSize = 10;
String pageSize = request.getParameter("pageSize");
page.setPageSize(pageSize);
int curPage = 1;
String curPage = request.getParameter("curPage");
page.setCurPage(curPage);
Map<String,Object> map = new HashMap<String, Object>();
map.put("startPage", page.getStartPage());
map.put("endPage", page.getEndPage());
List<xxx> list = service.findPage(map);
ModelAndView mv=new ModelAndView();
mv.addObject("list", list);
mv.addObject("page", page);
mv.setViewName("xxx.jsp");
return mv;
}
jsp 页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div style="text-align:right" id="page">
每页<input type="text" name="pageSize" size="2" value="${page.pageSize}"/>条
当前页数:[${page.curPage }/${page.totalPage }]
<c:if test="${page.curPage>1}">
<a href="findPage.action?curPage=1&pageSize=${page.pageSize}">首页</a>
<a href="findPage.action?curPage=${page.curPage-1}&pageSize=${page.pageSize}">上一页</a>
</c:if>
<c:if test="${page.curPage<page.totalPage}">
<a href="findPage.action?curPage=${page.curPage+1}&pageSize=${page.pageSize}">下一页</a>
<a href="findPage.action?curPage=${page.totalPage}&pageSize=${page.pageSize}">末页</a>
</c:if>
转到第<input type="text" name="curPage" size="3" value="${page.curPage}"/>页
<input type="submit" name="button" value="go"/>
</div>
js
<script type="text/javascript">
$(function(){
$("#page a").mouseover(function(){
$(this).addClass("mousePage");
});
$("#page a").mouseout(function(){
$(this).removeClass("mousePage");
});
});
</script>
CSS
<style type="text/css">
/* 分页 开始*/
#page{
color: #3C3C3C;
font-size:15px;
padding-bottom:2px;
}
#page a{
border:1px solid #C4E1FF;
/* border-width:1px 2px 3px 2px; */
padding:5px 8px 5px 8px;
font-size:16px;
margin:0px;
}
.mousePage{
background-color:#004B97;
color:white;
}
/* 分页 结束*/
</style>
效果图