之前做分页效果一直都是使用JS控制,后来觉得不方便也不好控制,就自己写了这个根据Struts2标签在JSP页面中控制页码显示的分页。
分页效果图:
废话不多说,直接上代码了:
Java代码:
package com.goldweb.action;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.stereotype.Controller;
import com.goldweb.common.StrutsBaseAction;
@SuppressWarnings("serial")
@Controller
@ParentPackage("json-default")
@Namespace("/pager")
public class PagerAction extends StrutsBaseAction {
// 当前页
private int currentPage = 1;
// 也容量
private int pageSize = 10;
// 总页数
private int totalPage;
// 总记录数
private int allCount = 1000;
@Action(value = "pager", results = { @Result(name = "success", location = "/pager.jsp") }, params = {
"contentType", "text/html" })
public String pager() {
System.out.println(currentPage);
totalPage = allCount % pageSize == 0 ? allCount / pageSize : allCount / pageSize + 1;
return SUCCESS;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getAllCount() {
return allCount;
}
}
JSP代码
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页测试</title>
<style type="text/css">
/* 全局样式 */
body,p,div,ul,ol,li,dl,dd,dt,h1,h2,h3,h4,h5,h6,form,input,select,label,table,tr,td,th,thead,tbody,tfoot
{
margin: 0px auto;
padding: 0px;
border: 0;
}
body {
font-size: 12px;
font-family: Tahoma, Geneva, sans-serif;
background-position: top;
background-repeat: repeat-x;
}
a {
text-decoration: none;
}
/* 正文:分页功能区 */
#pages {
width: 940px;
text-align: center;
height: 28px;
line-height: 28px;
margin-top: 5px;
}
#pages a,#pages a.current_page:hover {
padding: 5px 10px;
}
#pages a:hover {
padding: 5px 9px;
}
/* 正文:分页功能区 */
#pages a {
border-radius: 4px;
color: #000;
border: #97b9c9 solid 1px;
}
#pages a:hover {
background: #cddde4;
border: #97b9c9 solid 1px;
color: #067db5;
}
#pages a.current_page {
background: #cddde4;
border: #89bdd8 solid 1px;
color: #067db5;
}
</style>
</head>
<body>
<fieldset style="margin: 0 auto;">
<legend>分页测试</legend>
<div id="pages">
<s:if test="currentPage<=1">
<a href="#">首页</a>
<a href="#" class="pager">上一页</a>
</s:if>
<s:else>
<a href="pager.action?currentPage=1">首页</a>
<a
href="pager.action?currentPage=<s:property value="currentPage-1"/>">上一页</a>
</s:else>
<!-- 页码限制为10页算法 -->
<s:iterator
begin="currentPage>4?currentPage+5>totalPage?totalPage>10?totalPage-9:1:currentPage-4:1"
end="currentPage>4?currentPage+5>totalPage?totalPage:currentPage+5:totalPage>10?10:totalPage"
var="i">
<s:if test="currentPage==#i">
<a href="#" class="current_page"><s:property value="#i" /></a>
</s:if>
<s:else>
<a href="pager.action?currentPage=<s:property value="#i"/>"><s:property
value="#i" /></a>
</s:else>
</s:iterator>
<s:if test="currentPage>=totalPage">
<a href="#">下一页</a>
<a href="#">尾页</a>
</s:if>
<s:else>
<a
href="pager.action?currentPage=<s:property value="currentPage+1"/>">下一页</a>
<a href="pager.action?currentPage=<s:property value="totalPage"/>">尾页</a>
</s:else>
</div>
</fieldset>
</body>
</html>
以下通过在Java的Action中计算好开始页码和结束页码来限制显示的页码:
Java代码:
package com.goldweb.action;
import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Namespace;
import org.apache.struts2.convention.annotation.ParentPackage;
import org.apache.struts2.convention.annotation.Result;
import org.springframework.stereotype.Controller;
import com.goldweb.common.StrutsBaseAction;
@SuppressWarnings("serial")
@Controller
@ParentPackage("json-default")
@Namespace("/pager")
public class Pager2Action extends StrutsBaseAction {
// 当前页
private int currentPage = 1;
// 页容量
private int pageSize = 10;
// 总页数
private int totalPage;
// 总记录数
private int allCount = 666;
// 开始页码
private int startPage = 1;
// 结束页码
private int endPage = 10;
@Action(value = "pager2", results = { @Result(name = "success", location = "/pager2.jsp") }, params = {
"contentType", "text/html" })
public String pager() {
System.out.println(currentPage);
totalPage = (int) Math.ceil((double) allCount / (double) pageSize);
// 显示页码计算
if (currentPage > 4) {
startPage = currentPage - 4;
endPage = currentPage + 5;
}
if (endPage > totalPage) {
if (totalPage>10)
startPage = totalPage - 9;
else
startPage = 1;
endPage = totalPage;
}
if (startPage < 1) {
startPage = 1;
}
return SUCCESS;
}
public int getCurrentPage() {
return currentPage;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getAllCount() {
return allCount;
}
public int getStartPage() {
return startPage;
}
public int getEndPage() {
return endPage;
}
}
JSP代码:
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>分页测试</title>
<style type="text/css">
/* 全局样式 */
body, p, div, ul, ol, li, dl, dd, dt, h1, h2, h3, h4, h5, h6, form, input, select, label, table, tr, td, th, thead, tbody, tfoot
{
margin: 0px auto;
padding: 0px;
border: 0;
}
body {
font-size: 12px;
font-family: Tahoma,Geneva,sans-serif;
background-position: top;
background-repeat: repeat-x;
}
a {
text-decoration: none;
}
/* 正文:分页功能区 */
#pages {
width: 940px;
text-align: center;
height: 28px;
line-height: 28px;
margin-top: 5px;
}
#pages a, #pages a.current_page:hover {
padding: 5px 10px;
}
#pages a:hover {
padding: 5px 9px;
}
/* 正文:分页功能区 */
#pages a {
border-radius: 4px;
color: #000;
border: #97b9c9 solid 1px;
}
#pages a:hover {
background: #cddde4;
border: #97b9c9 solid 1px;
color: #067db5;
}
#pages a.current_page {
background: #cddde4;
border: #89bdd8 solid 1px;
color: #067db5;
}
</style>
</head>
<body>
<fieldset style="margin:0 auto;">
<legend>分页测试</legend>
<div id="pages">
<s:if test="currentPage<=1">
<a href="#">首页</a>
<a href="#" class="pager">上一页</a>
</s:if>
<s:else>
<a href="pager2.action?currentPage=1">首页</a>
<a href="pager2.action?currentPage=<s:property value="currentPage-1"/>">上一页</a>
</s:else>
<!-- 这里直接用Action传过来的 开始页码 和 结束页码 -->
<s:iterator begin="startPage" end="endPage" var="i">
<s:if test="currentPage==#i">
<a href="#" class="current_page"><s:property value="#i"/></a>
</s:if>
<s:else>
<a href="pager2.action?currentPage=<s:property value="#i"/>"><s:property value="#i"/></a>
</s:else>
</s:iterator>
<s:if test="currentPage>=totalPage">
<a href="#">下一页</a>
<a href="#">尾页</a>
</s:if>
<s:else>
<a href="pager2.action?currentPage=<s:property value="currentPage+1"/>">下一页</a>
<a href="pager2.action?currentPage=<s:property value="totalPage"/>">尾页</a>
</s:else>
</div>
</fieldset>
</body>
</html>