struts2、jsp分頁程式碼
阿新 • • 發佈:2019-02-20
分頁樣式
一上傳這圖片就被打上了水印,暈。
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib uri="/struts-tags" prefix="s"%> <s:if test="#request.count>#request.pageSize"> <s:set id="len" value="#request.count%#request.pageSize>0?(#request.count/#request.pageSize+1):(#request.count/#request.pageSize)"/> <div style="margin:auto;width:400px;overflow: hidden;text-align:center;"> <div style='height:30px;margin:auto;padding:0px;font-size:15px;color:#277ba0;line-height:30px;float:none;display: inline-block;'> <div style='float:left;font-size:15px;color:#277ba0;width:66px;height:30px;line-height:30px;text-align:center;${pageIndex-1>0?"cursor:pointer;":""}'<s:if test="#request.pageIndex-1>0"> onclick='jump(${pageIndex-1},"${param.formid}",${len})'</s:if>>上一頁</div> <div style='float:left;width:15px;border-left:1px solid #277ba0;'> </div> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;${(pageIndex==1)?"background:#277ba0;color:white;":""}' onclick='jump(1,"${param.formid}",${len})'>1</div> <!-- len 總頁數、 now--> <s:if test="#request.pageIndex>3&&#len>5"> <div style='text-align:center;float: left;width:30px'>...</div> </s:if> <s:if test="#request.pageIndex==1"> <s:iterator begin="2" end="4" id="item"> <s:if test="#len>2&&(#item+#request.pageIndex)<=#len"> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;' onclick='jump(${item},"${param.formid}",${len})'>${item}</div> </s:if> </s:iterator> </s:if> <s:iterator begin="2" end="#len-1" id="item"> <s:if test="#item==#request.pageIndex"> <s:if test="#request.pageIndex==#len-1&&#len>=5"> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;' onclick='jump(${item-2},"${param.formid}",${len})'>${item-2}</div> </s:if> <s:if test="#item>2"> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;' onclick='jump(${item-1},"${param.formid}",${len})'>${item-1}</div> </s:if> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;background:#277ba0;color:white;' onclick='jump(${item},"${param.formid}",${len})'>${item}</div> <s:if test="#item<#len-1"> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;' onclick='jump(${item+1},"${param.formid}",${len})'>${item+1}</div> </s:if> <s:if test="#request.pageIndex==2&&#item<#len-2"> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;' onclick='jump(${item+2},"${param.formid}",${len})'>${item+2}</div> </s:if> </s:if> </s:iterator> <s:if test="#request.pageIndex==#len"> <s:iterator begin="#len-3" end="#len-1" id="item"> <s:if test="#len>2&&#item>1"> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;' onclick='jump(${item},"${param.formid}",${len})'>${item}</div> </s:if> </s:iterator> </s:if> <s:if test="#len>=6&&#request.pageIndex<#len-2"> <div style='text-align:center;float: left;width:30px;'>...</div> </s:if> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:30px;cursor:pointer;${(pageIndex==len)?"background:#277ba0;color:white;":""}' onclick='jump(${len},"${param.formid}",${len})'>${len}</div> <div style='text-align:center;float:left;width:15px;border-right:1px solid #277ba0;'> </div> <div style='text-align:center;float:left;font-size:15px;color:#277ba0;width:66px;height:30px;line-height:30px;${len-pageIndex>0?"cursor:pointer;":""}'<s:if test="#len-#request.pageIndex>0"> onclick='jump(${pageIndex+1},"${param.formid}",${len})'</s:if>>下一頁</div> </div> </div> </s:if>
以為上是pagination.jsp的內容。變數說明:request.count數量總條數、request.pageSize每頁顯示多少條、pageIndex當前頁序號從1開始,裡現還出現了${len}這個變數,仔細看第四行程式碼,我是用set來定義的,formid則是呼叫的jsp傳過來的。js程式碼如下:(list.js)
function jump(index,formid,len) { var form;//form if(formid!=""){ form = $("#"+formid); }else{ form = $("form").eq(0); } index = index || form.find("input[name=pageIndex]").eq(0).val(); var reg = /^\d+(\.\d+)?$/; if (!reg.test(index)||!reg.test(len)) { alert("\u9a8c\u8bc1\u5931\u8d25!"); return; } var pageindex = parseInt(index); var length = parseInt(len); if (pageindex <= length && pageindex > 0) { if(form.find("input[name=pageIndex]").size()<=0){ var p = $("<input type='hidden' name='pageIndex' value='"+pageindex+"'/>"); form.append(p); }else{ (form.find("input[name=pageIndex]")[0]).value = pageindex; } form.submit(); return true; } }
下面是需要翻頁的jsp呼叫方式:
<script type="text/javascript" src="list.js"></script>
<form id='form1' method="post">
//你的程式碼
</form>
<jsp:include page="pagination.jsp">//載入come.jsp
<jsp:param name="formid" value="form1" />//傳遞引數
</jsp:include>
你也可以不給form寫id這樣下面jsp:include也不必傳引數過去,預設用第一個form。