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

   日期:2020-11-02     浏览:89    评论:0    
核心提示:分页显示功能介绍(图):按指定的页号获取数据按照指定的每页记录数来获取功能分析分页页面使用到的数据有四整数,一个集合 。参考PageBean类四个整数分别是总页数总记录数每页记录数当前页数一个集合在数据库中所查询到的list公司记录集合,用来展示的记录我这边就没有自己来创建pageBean了,直接使用了pagehelper这个分页插件pagehelper使用(1)依赖 <!--properties标签中的版本-->

分页显示功能介绍(图):

按指定的页号获取数据

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

功能分析

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

四个整数分别是

  • 总页数

  • 总记录数

  • 每页记录数

  • 当前页数

一个集合

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

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

pagehelper使用

  • (1)依赖
        <!--properties标签中的版本-->
		<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中添加如下插件配置。

 	    <!-- PageHelper配置 -->
		<property name="plugins">
            <array>
                <bean class="com.github.pagehelper.PageInterceptor">
                    <property name="properties">
                        <!--使用下面的方式配置参数,一行配置一个 -->
                        <!-- pageNum<=0 时会查询第一页 -->
                        <!-- 指定数据库方言 -->
                        <value>
                            reasonable=true
                            helperDialect=mysql
                        </value>
                    </property>
                </bean>
            </array>
        </property>

PageHelper配置的具体位置如图:

后台代码

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+鼠标左键进入这个类,看其源码,如下图所示。

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

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,该方法将失效。

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

    <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>

页面效果:

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>

##页面效果:

重用传值图解:

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

  • (1)分页工具条,肯定是可以重用的

    将company-list.jsp中的分页工具条代码封装到一个单独的page.jsp页面中。

    后期哪个页面需要用这个分页工具条的话,就在页面中引入page.jsp页面。

   <!--原本在company-list.jsp页面的分页工具条,被封装到page.jsp中,我这边引入page.jsp-->
            <!-- /.box-footer-->
            <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)

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服