欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-17 16:48:40
...
好吧,其实很简单一个东西,顺手就分享一下



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


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



  • 分享一个简单的分页页面效果
            
    
    
        bootstrapCSSjQuery 
  • 大小: 5.7 KB