【SaaS - Export项目】07 - jsp页面重用，pagehelper实现分页，分页jsp重用

桃扇骨 2022-11-21 04:12 80阅读 0赞

### 文章目录 ###

*   *  jsp代码重用
     *  分页显示company信息
     *   *  1. 分页代码重用
         *  2. 通过在页面中引入分页

## jsp代码重用 ##

1）通过`<jsp:include>`来包含页面实现重用  
比如在当前页面A中重用**B.jsp**页面

<jsp:include page="B.jsp" />

2）当前页面A通过`<jsp:param>`来**传递参数**给B.jsp页面，B通过`${param.xxx}`来获取

<jsp:include page="B.jsp">
    	<jsp:param name="username" value="strive_day"/>
    </<jsp:include>
    
    
    ${param.username}

案例：  
`jspinclude_A.jsp`

<%-- 子标签param，将k-v键值对的值传给被include重用的页面 --%>
        <h3>jsp:include调用B并且传递参数</h3>
            <%-- 传递键值对，分页可以通过传地址实现 --%>
        <jsp:include page="/testjsp/jspinclude_B.jsp">
            <jsp:param name="username" value="strive_day" ></jsp:param>
            <jsp:param name="url" value="http://www.baiud.com" ></jsp:param>
        </jsp:include>
        
        <h3>jsp:include调用B并不进行参数传递</h3>
        <jsp:include page="/testjsp/jspinclude_B.jsp"></jsp:include>

`jspinclude_B.jsp`

<h3>我是可以重用的jsp代码部分(jspinclude_B)</h3>
        username : ${param.username}
        <br/>
        url : ${param.url}<%--分页需要使用地址参数，可以通过该方法实现--%>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]

## 分页显示company信息 ##

![在这里插入图片描述][20201030212915354.gif_pic_center]

### 1. 分页代码重用 ###

`common/page.jsp`分页信息，以后使用分页就重用就行。

<%-- 分页 公共部分 --%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <html>
    <body>
    <div class="pull-left">
        <div class="form-group form-inline">
            <%-- pi --%>
            总共${pi.pages} 页，共${pi.total} 条数据。
        </div>
    </div>
    
    <div class="box-tools pull-right">
        <ul class="pagination" style="margin: 0px;">
            <li>
                <%-- goPage(1)去第一页 --%>
                <a href="javascript:goPage(1)" aria-label="Previous">首页</a>
            </li>
            <%-- c:if判断，如果是第一页，就不显示上一页按钮 --%>
            <c:if test="${pi.pageNum != 1 }">
                <li><a href="javascript:goPage(${pi.prePage})">上一页</a></li>
            </c:if>
    
    
            <%--<c:forEach begin="1" end="${pi.pages}" var="i">--%>
            <%-- 不显示所有的页数，只显示当前页的前五页和当前页的后五页（判断是否越界） --%>
            <c:forEach begin="${pi.pageNum-5 <= 0 ? 1:pi.pageNum-5 }" end="${pi.pageNum+5>pi.pages?pi.pages:pi.pageNum+5}" var="i">
                <%-- 循环显示页数，如果页数是当前页，就active的css效果，高亮，点击页数就跳转goPage(i)指定页面 --%>
                <li class="paginate_button ${pi.pageNum==i ? 'active':''}"><a href="javascript:goPage(${i})">${i}</a></li>
            </c:forEach>
    
            <c:if test="${pi.pageNum != pi.pages }">
                <li><a href="javascript:goPage(${pi.nextPage})">下一页</a></li>
            </c:if>
    
            <li>
                <a href="javascript:goPage(${pi.pages})" aria-label="Next">尾页</a>
            </li>
        </ul>
    </div>
    <%-- 点击分页其实就等于在提交表单，传给后台当前页、每页数据大小 pageUrl是页面传来的参数信息controller的地址url --%>
    <form id="pageForm" action="${param.pageUrl}" method="post">
        <input type="hidden" name="curr" id="curr">
        <input type="hidden" name="pageSize" id="pageSize">
    </form>
    <script> //goPage重新发送请求，请求page页 function goPage(page) { //跳转到page页显示为当前页 document.getElementById("curr").value = page //每页多少数据从pi分页pageInfo里面获取 //当你点击分页信息（上一页、下一页、第几页、首尾页）的时候，就等于在提交form表单 //然后通过页面传来的jsp:param参数（传递的是需要访问的controller的url地址，然后访问controller实现分页 document.getElementById("pageSize").value = ${ pi.pageSize} document.getElementById("pageForm").submit() } </script>
    </body>
    </html>

### 2. 通过在页面中引入分页 ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTQyNTM0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/2ebba9b393f74ac7bff281d55cf162a9.png
[20201030212915354.gif_pic_center]: /images/20221120/b9dbbca1e1c948edb39690e323bee349.png