saas-export项目-company记录列表的分页显示

末蓝、 2022-11-21 11:23 258阅读 0赞

## 分页显示功能介绍（图）： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]

### 按指定的页号获取数据 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 1]

### 按照指定的每页记录数来获取 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 2]

## 功能分析 ##

分页页面使用到的数据有四整数，一个集合 。参考PageBean类

#### 四个整数分别是 ####

*  总页数
 *  总记录数
 *  每页记录数
 *  当前页数

#### 一个集合 ####

*  在数据库中所查询到的list公司记录集合，用来展示的记录

我这边就没有自己来创建pageBean了，直接使用了`pagehelper`这个分页插件

# pagehelper使用 #

*  （1）依赖

<pagehelper.version>5.1.8</pagehelper.version>   
    
    		<dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper</artifactId>
                <version>${pagehelper.version}</version>
            </dependency>

*  （2）配置  
    》配置有两种方式
    
    ### applicationContext-dao.xml的sqlSessionFactory中添加如下插件配置。 ###

<property name="plugins">
                <array>
                    <bean class="com.github.pagehelper.PageInterceptor">
                        <property name="properties">
                            
                            
                            
                            <value>
                                reasonable=true
                                helperDialect=mysql
                            </value>
                        </property>
                    </bean>
                </array>
            </property>

## PageHelper配置的具体位置如图： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 3]

## 后台代码 ##

### TestCompanyService ###

@Test
        public void test05(){ 
            int currentPage = 1;
            int pageSize = 3;
            //PageInfo 包含四个整数 一个集合
            PageInfo<Company> pi = companyService.findPage(currentPage,pageSize);
    
            l.info("test05 pi = "+pi);
        }

方法`companyService.findPage(currentPage,pageSize);`返回的是`pageInfo`类，我们按`Ctrl+鼠标左键`进入这个类,看其源码，如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 4]

当你配置好pagehelper后，返回的pageInfo类中的属性，都会自动帮我们赋好值，这样，我们需要使用，只需要调用get方法，就可以取到该类中的值。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 5]

## ICompanyService ##

PageInfo<Company> findPage(int currentPage, int pageSize);

## CompanyServiceImpl ##

@Override
        public PageInfo<Company> findPage(int currentPage, int pageSize) { 
            //设置参数
            PageHelper.startPage(currentPage,pageSize);
            //查询由拦截器在 select * from ss_company 基础上，生成
            //select count(*) from ss_company
            //select * from ss_company limit (currentPage-1)*pageSize ,pageSize
            List<Company> list = iCompanyDao.findAll();
            //将集合封装
            PageInfo<Company> pi = new PageInfo<>(list);
            return pi;
        }

## 这边介绍一个注解`@Deprecated` ##

### 在方法上加`@Deprecated`，该方法将失效。 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 6]

#  #

## CompanyController ##

@RequestMapping(path="/toList",method = RequestMethod.GET)
        public String toList( Integer curr, Integer pageSize, Model model){ 
            //调service获取数据
            if (curr == null) { 
                curr = 1;
            }
            if (pageSize == null) { 
                pageSize = 10;
            }
            PageInfo<Company> pi = iCompanyService.findPage(curr,pageSize);
            l.info("toList pi="+pi);
            model.addAttribute("pi",pi);
            //将数据发到页面，使用标签
            return "company/company-list";
        }

## 前台代码 ##

## company-list.jsp ##

![在这里插入图片描述][20201026175139736.png_pic_center]

<div class="box-tools pull-right">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">首页</a>
                        </li>
                        <c:if test="${pi.hasPreviousPage}">
                            <li><a href="#">上一页</a></li>
                        </c:if>
    
                        <c:forEach begin="1" end="${pi.pages}" step="1" varStatus="vs" >
                            <c:if test="${vs.index == pi.pageNum}">
                                <li class="active" ><a href="#" >${vs.index}</a></li>
                            </c:if>
    
                            <c:if test="${vs.index != pi.pageNum}">
                                <li><a href="#">${vs.index}</a></li>
                            </c:if>
    
                        </c:forEach>
    
                        <c:if test="${pi.hasNextPage}">
                           <li><a href="#">下一页</a></li>
                        </c:if>
                        <li>
                            <a href="#" aria-label="Next">尾页</a>
                        </li>
                    </ul>
                </div>
            </div>

## jsp代码重用知识点介绍 ##

*  （1）jsp代码是可以重用
 *  （2）jsp代码如何重用？  
    建立jsp页面 A，保存重用代码  
    在当前页面 B 中引入A  
    `<jsp:include page="A.jsp" />`
 *  （3）B可以将参数传给A  
    `<jsp:param name="jack" value="rose"/>`  
    `${param.jack}`

### 下面举一个具体的例子: ###

### demo02.jsp ###

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <%-- 子标签param，将k-v值传给被include页面--%>
    <jsp:include page="demo02_common.jsp">
        <jsp:param name="userName" value="李柏霖"/>
        <jsp:param name="url" value="http://123.com"/>
    </jsp:include>
    我是主要内容
    
    </body>
    </html>

## 页面效果： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 7]

## demo02\_common.jsp ##

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <h1>我是可以重用的jsp代码部分</h1>
    ${param.userName}
    ${param.url} //分页需要使用地址参数
    </body>
    </html>

\#\#页面效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 8]

## 重用传值图解: ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 9]

## 在本saas项目中jsp代码重用- 分页代码 ##

*  （1）分页工具条，肯定是可以重用的
    
    > 将company-list.jsp中的分页工具条代码封装到一个单独的page.jsp页面中。
    > 
    > 后期哪个页面需要用这个分页工具条的话，就在页面中引入page.jsp页面。

<div class="box-footer">
                    <jsp:include page="../common/page.jsp">
                        <jsp:param value="${path}/company/toList.do" name="pageUrl"/>
                    </jsp:include>
                </div>

### 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.pages} 页，共${pi.total} 条数据。
            <select class="form-control">
                <option>2</option>
                <option>10</option>
                <option>15</option>
                <option>20</option>
                <option>50</option>
                <option>80</option>
            </select> 条
    
        </div>
    </div>
    
    <div class="box-tools pull-right">
        <ul class="pagination" style="margin: 0px;">
            <li >
                <a href="javascript:goPage(1)" aria-label="Previous">首页</a>
            </li>
            <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">
                <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>
    <form id="pageForm" action="${param.pageUrl}" method="post">
        <input type="hidden" name="curr" id="curr">
        <input type="hidden" name="pageSize" id="pageSize">
    </form>
    <script> function goPage(page) { document.getElementById("curr").value = page //curr=2 document.getElementById("pageSize").value = ${ pi.pageSize} //pageSize=3 document.getElementById("pageForm").submit() } </script>
    </body>
    </html>

*  （2）重新修改页面的el表达式

## 效果:(为了测试,我将CompanyController中的默认pageSize=2) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/eca6151dceeb40bda45cb2156135dad8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/ddc340aa476143be9618ade92d77ded0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/613d7814af774cb79efd3555f25f131f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/89690c78141640e58e6afa8f7b5caebe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221120/915b9b5ff9c84f66a8aa8041371ac096.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221120/0967e77696e1459ba82065581e593f46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221120/a700b40a12764434a2443d1eacd028ce.png
[20201026175139736.png_pic_center]: /images/20221120/042c5b2726dc41e7ad3ca2333b6b5ba2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221120/03bd9abfd7fd417590a32dd9a114505e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221120/a88fb7b1b4a344838631edd42f79a2f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221120/1ec38cd498df4dbfba6b62e6ed70608a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTI0OTA1_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221120/169146f382884a98afdbb1cf5b628cca.png