效果预览:
实现代码:
分页标签处理类:
package ln.ydc.blog.web.tag.myjsp;
import java.io.IOException;
import javax.servlet.jsp.JspContext;
import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.SimpleTagSupport;
import common.util.Pagination;
/**
* 分页标签处理类
*
* @author yangdc
*
*/
public class PaginationTag extends SimpleTagSupport {
/**
* 分页数据(required)
*/
private Pagination pagination;
/**
* 查询form的Id,默认为queryForm
*/
private String queryForm = "queryForm";
/**
* 分页div,默认为paginationId
*/
private String divId = "paginationId";
/**
* 分页样式,默认为technorati
*/
private String divClass = "technorati";
public void doTag() throws JspException, IOException {
// 参数验证
StringBuffer strBuf = new StringBuffer();
strBuf.append("<script type=\"text/javascript\">");
strBuf.append("var paga_queryForm = document.forms['").append(queryForm).append("'];");
/*
strBuf.append("var newInput = document.createElement('input');");
strBuf.append("newInput.type='hidden';");
strBuf.append("newInput.name='pageNo';");
strBuf.append("paga_queryForm.appendChild(newInput);");
*/
strBuf.append("function paga_toPage(pageNo) {");
strBuf.append("paga_queryForm.pageNo.value=").append("pageNo;");
strBuf.append("paga_queryForm.submit();");
strBuf.append("}");
strBuf.append("</script>");
strBuf.append("<div id=\"").append(divId).append("\" class=\"").append(divClass).append("\">");
// 上一页
if (pagination.getPageNo() == 1) {
// strBuf.append(" <a href=\"#\"><span class=\"first_link\">首页</span></a> ");
strBuf.append(" <span class=\"disabled\">").append(" << </span> ");
} else {
// strBuf.append(" <a href=\"#\" οnclick=\"paga_toPage(1);\"><span class=\"first_link\">首页</span></a> ");
strBuf.append(" <a href=\"#\" οnclick=\"paga_toPage(").append(pagination.getPageNo() - 1).append(")\"> << </a> ");
}
for (int i = pagination.getStartIndex(); i <= pagination.getEndIndex(); i++) {
if (pagination.getPageNo() == i) {
strBuf.append("<span class=\"current\">").append(i).append("</span>");
} else {
strBuf.append("<a href=\"#\"").append(" οnclick=\"paga_toPage(").append(i).append(");\">").append(i).append("</a>");
}
}
// 下一页
if (pagination.getPageNo() == pagination.getTotalPage()) {
strBuf.append(" <span class=\"disabled\">").append(" >> </span> ");
// strBuf.append(" <a href=\"#\"><span class=\"end_link\">末页</span></a> ");
} else {
strBuf.append(" <a href=\"#\" οnclick=\"paga_toPage(").append(pagination.getPageNo() + 1).append(")\"> >> </a> ");
// strBuf.append(" <a href=\"#\" οnclick=\"paga_toPage(").append(pagination.getTotalPage()).append(")\"><span class=\"end_link\">末页</span></a> ");
}
strBuf.append("<span class=\"info\">(第").append(pagination.getPageNo()).append("/").append(pagination.getTotalPage()).append("页").append(" 共").append(pagination.getTotalRecord()).append(
"条)</span>");
strBuf.append("</div>");
// System.out.println(strBuf.toString());
JspContext ctx = getJspContext();
JspWriter out = ctx.getOut();
out.print(strBuf.toString());
}
public Pagination getPagination() {
return pagination;
}
public void setPagination(Pagination pagination) {
this.pagination = pagination;
}
public String getQueryForm() {
return queryForm;
}
public void setQueryForm(String queryForm) {
this.queryForm = queryForm;
}
public String getDivId() {
return divId;
}
public void setDivId(String divId) {
this.divId = divId;
}
public String getDivClass() {
return divClass;
}
public void setDivClass(String divClass) {
this.divClass = divClass;
}
}
分页工具类:
package common.util;
import java.util.List;
/**
* 分页工具类
* @author ydc
*
* @param <T>
*/
public class Pagination<T> {
// 以下4个属性必须指定
private List<T> records; // 分页数据
private int totalRecord; // 总记录数
private int pageNo; // 当前页码,第几页
private int pageSize; // 每页显示的记录数,每页显示多少条数据
private int totalPage; // 总页数
private int startIndex; // 开始索引
private int endIndex; // 结束索引
private int indexCount = 10;// 显示的索引数目,如:10的话, 则显示1-10, 2-11
// public Pagination() {}
public Pagination(List<T> records, int totalRecord, int pageNo, int pageSize) {
this.records = records;
this.totalRecord = totalRecord;
this.pageNo = pageNo;
this.pageSize = pageSize;
// 根据总记录数和每页显示数计算总页数(totalRecord+pageSize->totalPage)
totalPage = this.totalRecord / this.pageSize;
totalPage = (this.totalRecord % pageSize == 0) ? totalPage : (totalPage + 1);
// 根据索引数目,当前页,总页数计算开始索引和结束索引(indexCount+pageNo+totalPage->startIndex+endIndex)
startIndex = indexCount/2;
startIndex = pageNo - (indexCount%2 == 0 ? (startIndex - 1) : startIndex);
endIndex = pageNo + indexCount/2;
// 1 <= startIndex < pageNo < endIndex <= totalPage
// startIndex = pageNo - indexCount/2
// endIndex = pageNo + indexCount/2
if(startIndex < 1) {
startIndex = 1;
if(totalPage >= indexCount) {
endIndex = indexCount;
} else {
endIndex = totalPage;
}
}
if(endIndex > totalPage) {
endIndex = totalPage;
if(endIndex > indexCount) {
startIndex = endIndex - indexCount + 1;
} else {
startIndex = 1;
}
}
}
/**
* 获取分页数据
* @return
*/
public List<T> getRecords() {
return records;
}
/**
* 获取总记录数
* @return
*/
public int getTotalRecord() {
return totalRecord;
}
/**
* 当前页数(第几页)
* @return
*/
public int getPageNo() {
return pageNo;
}
/**
* 每页显示数据记录数
* @return
*/
public int getPageSize() {
return pageSize;
}
/**
* 总页数
* @return
*/
public int getTotalPage() {
return totalPage;
}
/**
* 起始索引
* @return
*/
public int getStartIndex() {
return startIndex;
}
/**
* 结束索引
* @return
*/
public int getEndIndex() {
return endIndex;
}
/****************************************************************/
/************************get/set方法******************************/
/****************************************************************/
public int getIndexCount() {
return indexCount;
}
public void setIndexCount(int indexCount) {
this.indexCount = indexCount;
}
}
标签声明文件:MyTaglib.tld
<?xml version="1.0" encoding="UTF-8" ?> <taglib xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd" version="2.0"> <description>自定义标签类</description> <tlib-version>1.0</tlib-version> <short-name>Mytaglib</short-name> <uri></uri> <tag> <description>分页标签</description> <name>Pagination</name> <tag-class>ln.ydc.blog.web.tag.myjsp.PaginationTag</tag-class> <body-content>empty</body-content> <attribute> <description> Collection of items to iterate over. </description> <name>pagination</name> <required>true</required> <rtexprvalue>true</rtexprvalue> <type>java.lang.Object</type> </attribute> <attribute> <name>queryForm</name> <required>false</required> </attribute> <attribute> <name>divId</name> <required>false</required> </attribute> <attribute> <name>divClass</name> <required>false</required> </attribute> </tag> </taglib>
分页样式(具体见附件):
/*CSS technorati style pagination*/
DIV.technorati {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center
}
DIV.technorati A {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px solid; COLOR: rgb(66,97,222); MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px solid; TEXT-DECORATION: none
}
DIV.technorati A:hover {
BACKGROUND-IMAGE: none; COLOR: #fff; BACKGROUND-COLOR: #4261df
}
DIV.technorati A:active {
BACKGROUND-IMAGE: none; COLOR: #fff; BACKGROUND-COLOR: #4261df
}
DIV.technorati SPAN.current {
PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; COLOR: #000; MARGIN-RIGHT: 3px; PADDING-TOP: 2px
}
DIV.technorati SPAN.disabled {
BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid
/* DISPLAY: none */
}
应用实例:
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> <%@ taglib uri="/WEB-INF/tlds/MyTaglib.tld" prefix="mytag"%> <c:set var="ctx" value="${pageContext.request.contextPath}"></c:set> <!-- 分页样式(附件中css.css文件) --> <link rel="stylesheet" type="text/css" href="${ctx }/res/styles/paginationStyle.css"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>用户列表</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <form action="${ctx }/admin/user" method="post" name="userListForm"> <input type="hidden" name="operation" value="list"/> <!-- 为了兼容ie --> <input type="hidden" name="pageNo" value="${pagination.pageNo }"> <table border="1"> <caption>用户列表</caption> <tr> <td>用户标识</td> <td>用户名</td> <td>真实姓名</td> <td>性别</td> <td>注册日期</td> <td>删除标志</td> <td colspan="3"> 操作 <a href="${ctx }/admin/user?operation=add">添加用户</a> </td> </tr> <c:forEach var="user" items="${pagination.records}"> <tr> <td>${user.id }</td> <td>${user.userName }</td> <td>${user.realName }</td> <td>${user.gender }</td> <td>${user.registerDate }</td> <td>${user.deleteFlag }</td> <td> <c:choose> <c:when test="${user.deleteFlag==0}"> <a href="${ctx }/admin/user?operation=delete&id=${user.id }&pageNo=${pagination.pageNo }">删除</a> </c:when> <c:otherwise> <a href="${ctx }/admin/user?operation=recover&id=${user.id }&pageNo=${pagination.pageNo }">恢复</a> </c:otherwise> </c:choose> </td> <td><a href="${ctx }/admin/user?operation=edit&id=${user.id }">编辑</a></td> <td><a href="${ctx }/admin/user?operation=info&id=${user.id }">查看</a></td> </tr> </c:forEach> </table> <mytag:Pagination pagination="${pagination}" queryForm="userListForm" divId="pagaId" /> </form> </body> </html>