分页样式
一上传这图片就被打上了水印,晕。
<%@ 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"> οnclick='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;":""}' οnclick='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;' οnclick='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;' οnclick='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;' οnclick='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;' οnclick='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;' οnclick='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;' οnclick='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;' οnclick='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;":""}' οnclick='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"> οnclick='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。