背景:做网站不免遇到新闻列表的时候, 有分页的情况,那么分页要如何实现呢,就成了问题。为了便于下次遇到的时候使用,这里做下记录
1分页css样式:
/*page*/
.page{ position: relative; text-align: center;}
.page_list{display: inline-block; font-family: Tahoma; height: 25px; padding: 20px 0;}
.page_list .prevcur, .page_list .nextcur { border: 1px solid #ccc; color: #ccc; font-size: 12px; width: auto;}
.page_list a, .pagebreak, .pagetext, .pagecur, .prevcur, .nextcur { float: left; font-family: Arial,SimSun; font-size: 13px; height: 23px; line-height: 23px; margin-right: 5px; min-width: 15px; overflow: hidden; padding: 0 5px; text-align: center; vertical-align: middle; white-space: nowrap;}
.page_list a { background-color: #fff; border: 1px solid #e5e5e5; display: block;}
.page_list a:hover{border: 1px solid #fd622c;}
.page_list .pagecur { background-color: #fd622c; border: 1px solid #fd622c; color: #ffffff; font-weight: 700;}
2前台jsp页面:
</pre><pre code_snippet_id="1624070" snippet_file_name="blog_20160325_1_8804766" name="code" class="html"><!-- 分页开始 -->
<div class="page">
<div class="page_list">
<c:choose>
<c:when test="${pageNo eq '1'}">
<a href="xx.do?pageNo=${pageNo}">上一页</a>
</c:when>
<c:otherwise>
<a href="xx.do?pageNo=${pageNo-1}">上一页</a>
</c:otherwise>
</c:choose>
<c:choose>
<c:when test="${aaa eq '123'}">
<c:choose>
<c:when test="${pageNo eq '1'}">
<a href="xx.do?pageNo=${1}" style="background-color:#FA7100;color:#FFF;">1</a>
</c:when>
<c:otherwise>
<a href="xx.do?pageNo=${1}">1</a>
</c:otherwise>
</c:choose>
</c:when>
<c:otherwise>
<a href="xx.do?pageNo=${1}">1</a>
<span class="pagebreak">...</span>
</c:otherwise>
</c:choose>
<c:forEach var="dataItem" items="${sss}">
<c:choose>
<c:when test="${dataItem eq pageNo}">
<a href="xx.do?pageNo=${dataItem}" style="background-color:#FA7100;color:#FFF;"><span style="white-space:pre"> </span>${<span style="white-space:pre"> </span>dataItem}</a>
</c:when>
<c:otherwise>
<a href="xx.do?pageNo=${dataItem}">${dataItem}</a>
</c:otherwise>
</c:choose>
</c:forEach>
<c:choose>
<c:when test="${pageNo eq pages}">
<a href="xx.do/lsj/articlelist.do?pageNo=${pageNo}">下一页</a>
<a href="javascript:void(0)">共${pages}页 </a>
</c:when>
<c:otherwise>
<a href="xx.do?pageNo=${pageNo+1}">下一页</a>
<a href="javascript:void(0)">共${pages}页 </a>
</c:otherwise>
</c:choose>
</div>
</div></span>
<!-- 分页结束 -->
2后台java代码:
其中max=每页显示的记录数
start = 开始坐标
recordCount= 总记录条数
=======================================================================
if (request.getParameter("pageNo") != null && !request.getParameter("pageNo").equals("")) {
pageNo = Integer.parseInt(request.getParameter("pageNo"));
}
Integer start = (pageNo - 1) * max;
if (start >= recordCount && start > 0) {
if (pageNo > 0) {
pageNo = pageNo - 1;
start = (pageNo - 1) * max;
} else {
start = 0;
}
}
BaseUtil.page(model, pageNo, recordCount, max);
public static void page( Model model,int pageNo,Integer recordCount,int column){
int pages = 0;
if(recordCount%column==0){
pages=recordCount/column;
}else{
pages=recordCount/column+1;
}
int count = pageNo;
List<Integer> sss = new ArrayList<Integer>();
if(pages>10){
for(int i=1;i<10;i++){
if(pages==i){
}else{
if(pages-pageNo<4){
sss.add(pages-9+i);
}else if(pages-pageNo==4){
sss.add(pages-9+i);
}else if(pageNo-1<=4){
sss.add(i+1);
}else{
sss.add(count-4+i-1);
}
}
}
}else{
for (int j = 1; j < pages; j++) {
sss.add(j+1);
}
}
int aaa=0;
if(pageNo-1<=4){
aaa = 123;
}
model.addAttribute("aaa", aaa);
model.addAttribute("pages", pages);
model.addAttribute("sss", sss);
}