分享一个简单的分页页面效果

好吧，其实很简单一个东西，顺手就分享一下






一个基于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>

不是很好看,
另外,那个 "转到" 能够去掉,直接输入页码,按回车,就可以了

有道理。
我感觉也不是很好看，另外图截的有点糊了，用起来手感还凑和 -_-

最好支持多种分页 ，想 google 那种

最好支持多种分页 ，想 google 那种