分享一个简单的分页页面效果 bootstrapCSSjQuery
程序员文章站
2022-03-17 16:48:40
...
好吧,其实很简单一个东西,顺手就分享一下
一个基于bootstrap和jsp的前台分页代码,然后,后台分页代码是比较主流的形式,就不写出来了
需要使用分页的地方插一句include就行了
另外,分页这个文件里没有导入bootstrap的css库,我是在使用分页的页面里导入的。
pagination.jsp
一个基于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>
上一篇: JPA 返回Map类型结果集
下一篇: JBPM中的基本概念 JBPM工作流