ssm+jsp+自定義標簽實現分頁,可以通用(前端實現)


近期做了一些分頁方面的開發,大致梳理一下

1 jsp頁面上關於分頁的代碼

<tr>
<td colspan="9">
<ule1:pagination url="${basePath}/csitem/item/queryOnlineItem.action?method=test" pageIndex='${currentPage}' totalPage='${totalPageCount}' pageSize="${pageSize }"></ule1:pagination>
</td>

</tr>

頁面僅需一個表格行,里面填入自定義標簽<ule1:pagination></ule1:pagination>即可

另外還需在頁面導入自定義標簽<%@ taglib uri="/WEB-INF/ule.tld" prefix="ule1" %>

頁面部分就這么多

要注意的是:currentPage totalPageCount pageSize這三個域是controller返回的,封裝在model或request都一樣,我們頁面上就需要這么多。

2,涉及的工具類

(1)自定義標簽tld文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
"http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<!-- 自定義標簽 v1.0 -->
<taglib>
<tlib-version>1.0</tlib-version>
<jsp-version>1.2</jsp-version>
<short-name>ule</short-name>
<!-- 分頁 -->
<tag>
<name>pagination</name>
<tag-class>
com.ule.web.csitem.util.PaginationTag
</tag-class>
<body-content>jsp</body-content>
<description>用於分頁的標簽</description>
<attribute>
<name>pageIndex</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<description>當前頁數</description>
</attribute>
<attribute>
<name>totalPage</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<description>總頁數</description>
</attribute>
<attribute>
<name>url</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<description>分頁action地址</description>
</attribute>
<attribute>
<name>pageSize</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
<description>顯示條數</description>
</attribute>
</tag>
</taglib>

(2)類com.ule.web.csitem.util.PaginationTag

public class PaginationTag extends TagSupport{
private static final long serialVersionUID = -8831698321587203192L;
private static Logger logger = Logger.getLogger(PaginationTag.class);
private static final String DOMAINRESOURCE = PropertiesUtil.getPropertyValue("DOMAIN_RESOURCE");
private int pageIndex;// 當前頁數
private int totalPage;//總頁數
private String url;//分頁action的url地址,類似:http://localhost:7070/mitem/onlinePriPro.do?method=searchItemList

private int pageSize;//總條數
@Override
public int doEndTag() throws JspException {
try{
//獲取URL
TreeMap<String, String> paramTreeMap = getParamTreeMap();
String location = generateUrl(paramTreeMap);
StringBuffer submitUrl = new StringBuffer();
submitUrl.append(url);
submitUrl.append(location);
//構造輸出到jsp頁面上的html代碼
StringBuffer html= new StringBuffer();
html.append(getPagerCss());//添加分頁標簽中需要的css代碼

html.append("<div class=\"ulepage\">");
html.append("顯示條數<select name='pageSize' id='pageSize' onchange='javascript:queryPage1();'>");
html.append("<option value='10' ");
if(pageSize==10){
html.append("selected='selected'");
}
html.append(">10</option>");

html.append("<option value='20' ");
if(pageSize==20){
html.append("selected='selected'");
}
html.append(">20</option>");

html.append("<option value='50' ");
if(pageSize==50){
html.append("selected='selected'");
}
html.append(">50</option>");

html.append("<option value='100' ");
if(pageSize==100){
html.append("selected='selected'");
}
html.append(">100</option>");

html.append("<option value='200' ");
if(pageSize==200){
html.append("selected='selected'");
}
html.append(">200</option>");
html.append("</select>");

html.append(getUpPageHref(submitUrl.toString(), pageIndex));//添加上一頁的html代碼
if (pageIndex > totalPage) pageIndex = 1; //如果頁數大於總頁數,則返回第一頁
if (pageIndex != 1) html.append("<a href=\""+ getSubmitUrl(submitUrl.toString(), 1,pageSize) + "\">1</a>");
if (pageIndex >= 5) html.append("...");
int endPage = pageIndex + 2;
if(endPage <= 5) endPage = 6;
if(endPage > totalPage) endPage = totalPage;



for (int i = pageIndex - 2; i <= endPage; i++) {
if (i > 0) {
if (i == pageIndex) {
html.append("<span>" + i + "</span>");//當前頁
} else if (i != 1 && i < totalPage){
html.append("<a href=\""+ getSubmitUrl(submitUrl.toString(), i,pageSize) + "\">" + i + "</a>");
}
}
}
if (pageIndex + 3 < totalPage && totalPage > endPage + 1) html.append("...");
html.append("");
if (pageIndex != totalPage) html.append("<a href=\""+ getSubmitUrl(submitUrl.toString(), totalPage,pageSize) + "\">" + totalPage + "</a>");
html.append(getDownPageHref(submitUrl.toString(), pageIndex));
html.append("共" + totalPage + "頁&nbsp;&nbsp;");
html.append("跳轉到&nbsp;<input id=\"PaginationJumpInputID\" style=\"width: 30px;\" type=\"text\" />&nbsp;頁<a href=\"javascript:goJump()\">GO</a>");
html.append("</div>");
//構造跳轉js代碼
html.append("<script type=\"text/javascript\">");
html.append("function goJump(){");
html.append("var jumpPageIndex = document.getElementById(\"PaginationJumpInputID\").value;");
html.append("if(jumpPageIndex && jumpPageIndex.match(/^[0-9]*$/)){");
html.append("if(jumpPageIndex < 1){");
html.append("jumpPageIndex = 1;}");
html.append("if(jumpPageIndex > " + totalPage + "){jumpPageIndex = " + totalPage + ";}");
html.append("}else{return;}");
html.append("window.location.href=\"" + submitUrl.toString() + "&&currentPage=" + "\" + jumpPageIndex+" +"\"&pageSize="+pageSize+"\";" );
html.append("}");
//顯示條數離焦事件js
html.append(" function queryPage1(){");
html.append("var pageSize=$('#pageSize option:selected').val();");
html.append("window.location.href=\"" + submitUrl.toString() + "&currentPage=" +pageIndex+"&pageSize=\"" + " + pageSize;");
html.append("}");

html.append("</script>");
pageContext.getOut().write(html.toString());
}catch(Exception e){
logger.error("doEndTag異常:", e);
}
return this.EVAL_PAGE;
}

/***
* 組裝url工具類
*/
private static String getSubmitUrl(final String url, int pageIndex,int pageSize){
StringBuffer newUrl = new StringBuffer();
newUrl.append(url).append("&currentPage=").append(pageIndex).append("&pageSize="+pageSize);
return newUrl.toString();
}
/** 獲取上一頁鏈接*/
public String getUpPageHref(String url, int pageIndex){
String upPageStr="<a title=\"上一頁\" class=\"pageupon\" href=\"" + getSubmitUrl(url, pageIndex-1,pageSize) + "\" ></a>";
if(pageIndex<=1){
upPageStr="<span title=\"上一頁\" class=\"pageupoff\"></span>";
}
return upPageStr;
}

/** 獲取下一頁鏈接 */
public String getDownPageHref(String url, int pageIndex){
String upPageStr="<a title=\"下一頁\" class=\"pagedownon\" href=\"" + getSubmitUrl(url, pageIndex+1,pageSize) + "\" ></a>";
if(pageIndex>=totalPage){
upPageStr="<span title=\"下一頁\" class=\"pagedownoff\"></span>";
}
return upPageStr;
}

/******
* 獲取分頁標簽所需要的樣式代碼
*/
private static String getPagerCss(){
StringBuffer cssCode = new StringBuffer();
cssCode.append("<style>");
cssCode.append(".page a,.page span{margin:0 10px;}");
cssCode.append(".pageupon,.pageupoff,.pagedownon,.pagedownoff{background:url("+DOMAINRESOURCE+"/i/search/090609/icopagenext.png) no-repeat;display:inline-block;height:13px;width:13px;overflow:hidden;vertical-align:middle;text-indent:-9999px;text-align:left;}");
cssCode.append(".pageupon{background-position:0 -13px;}");
cssCode.append(".pageupoff{background-position:0 0;}");
cssCode.append(".pagedownon{background-position:-13px -13px;}");
cssCode.append(".pagedownoff{background-position:-13px 0;}");
cssCode.append(".ulepage{");
cssCode.append("text-align:right !important;");
cssCode.append("color:#696969;");
cssCode.append("}");
cssCode.append(".ulepage a,.ulepage span{margin:0 10px;}");
cssCode.append("</style>");
return cssCode.toString();
}

/****
* 生產URL地址
*/
private String generateUrl(TreeMap<String, String> treeMap){
StringBuffer url = new StringBuffer();
String parameterName = null;
String value = null;
Iterator iterator = treeMap.keySet().iterator();
while (iterator.hasNext()) {
parameterName = (String)iterator.next();
url.append("&").append(parameterName).append("=").append(treeMap.get(parameterName));
}
HttpServletResponse response = (HttpServletResponse)pageContext.getResponse();
return response.encodeURL(url.toString());
}

/******
* 獲取param參數組成的map
*/
private TreeMap<String, String> getParamTreeMap() {
TreeMap<String, String> treeMap = new TreeMap();
HttpServletRequest request = (HttpServletRequest) pageContext.getRequest();
Enumeration parameterNamesEnum = request.getParameterNames();
if(parameterNamesEnum != null){
String parameterName = null;
Object value = null;
while (parameterNamesEnum.hasMoreElements()) {
parameterName = (String) parameterNamesEnum.nextElement();
if (parameterName != null && parameterName.length() > 0) {
if("currentPage".equals(parameterName) || "method".equals(parameterName) || "pageSize".equals(parameterName) ){
//過濾currentPage和method兩個參數,避免重復參數
continue;
}
value = request.getParameter(parameterName);
if(value != null && value.toString().trim().length() > 0){
treeMap.put(parameterName, value.toString());
}
}
}
}
return treeMap;
}


public String getUrl() {
return url;
}

public void setUrl(String url) {
this.url = url;
}

public int getPageIndex() {
return pageIndex;
}
public void setPageIndex(int pageIndex) {
this.pageIndex = pageIndex;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}

public int getPageSize() {
return pageSize;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
}

父類由servlet提供

 

具體就這么多,后面只要拿到分頁數據就行了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM