好吧,其实很简单一个东西,顺手就分享一下
[img]http://dl.iteye.com/upload/attachment/0076/4440/f8a7c75a-9428-3a62-b9bb-f1572a5ea4d9.png[/img]
一个基于bootstrap和jsp的前台分页代码,然后,后台分页代码是比较主流的形式,就不写出来了
需要使用分页的地方插一句include就行了
另外,分页这个文件里没有导入bootstrap的css库,我是在使用分页的页面里导入的。
pagination.jsp
[img]http://dl.iteye.com/upload/attachment/0076/4440/f8a7c75a-9428-3a62-b9bb-f1572a5ea4d9.png[/img]
一个基于bootstrap和jsp的前台分页代码,然后,后台分页代码是比较主流的形式,就不写出来了
需要使用分页的地方插一句include就行了
<jsp:include page="../common/pagination.jsp"></jsp:include>
另外,分页这个文件里没有导入bootstrap的css库,我是在使用分页的页面里导入的。
pagination.jsp
<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<div class="pagination">
<ul>
<!-- 分页首页按钮 -->
<s:if test="page.currentPageNo <= 1">
<li class="disabled"><span>首页</span></li>
</s:if>
<s:else>
<li><a href="?pageNo=1">首页</a></li>
</s:else>
<!-- 前一页按钮 -->
<s:if test="page.currentPageNo <= 1">
<li class="disabled"><span>前一页</span></li>
</s:if>
<s:else>
<li><a href="?pageNo=${page.currentPageNo - 1}">前一页</a></li>
</s:else>
<!-- 跳转 -->
<li><a> 第 <input id="page" type="text" id="current_page" autocomplete="off" value="${page.currentPageNo }"
style="margin-bottom: 2px; margin-top: 2px; width: 15px; height: 16px; direction: rtl;"> 页
</a></li>
<li><a id="skip" href="#" onclick="skipPage();">转到</a></li>
<!-- 下一页按钮 -->
<s:if test="page.currentPageNo >= page.allPages">
<li class="disabled"><span>下一页</span></li>
</s:if>
<s:else>
<li><a href="?pageNo=${page.currentPageNo + 1}">下一页</a></li>
</s:else>
<!-- 分页尾页按钮 -->
<s:if test="page.currentPageNo >= page.allPages">
<li class="disabled"><span>尾页</span></li>
</s:if>
<s:else>
<li><a href="?pageNo=${page.allPages}">尾页</a></li>
</s:else>
</ul>
<ul class="pull-right">
<li class="disabled"><a>第${page.firstRow} - ${page.lastRow }条记录 / 共${page.allRows }条</a></li>
</ul>
</div>
<script>
function skipPage(){
var number = $("#page").val().trim();
$("#skip").attr('href','?pageNo='+number);
$("#skip").click();
}
</script>