Visualización de paginación de lista de registros de empresa de proyecto de exportación saas

Introducción a la función de visualización de paginación (imagen):

Obtener datos de acuerdo con el número de página especificado

Obtenga de acuerdo con el número especificado de registros por página

Análisis funcional

Los datos utilizados por la página de paginación tienen cuatro números enteros, un conjunto. Clase PageBean de referencia

Los cuatro enteros son

• paginas totales

• total

• Número de registros por página

• número de página actual

Una colección

• Enumere la colección de registros de la empresa consultada en la base de datos, los registros utilizados para mostrar

No tengo que crear pageBean por mí mismo, uso pagehelpereste complemento de paginación directamente

uso de Pagehelper

• (1) Dependencia

        <!--properties标签中的版本-->
		<pagehelper.version>5.1.8</pagehelper.version>   

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

• (2) Configuración
  "Hay dos formas de configurar

  Agregue la siguiente configuración de complemento a sqlSessionFactory de applicationContext-dao.xml.

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

La ubicación específica de la configuración de PageHelper es la siguiente:

Código detrás

TestCompanyService

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

        l.info("test05 pi = "+pi);
    }

El método companyService.findPage(currentPage,pageSize);devuelve una pageInfoclase, presionamos para Ctrl+鼠标左键ingresar a esta clase y ver su código fuente, como se muestra en la figura siguiente.

Cuando configuras el pagehelper, las propiedades devueltas en la clase pageInfo nos asignarán valores automáticamente, de esta manera, necesitamos usarlo y simplemente llamar al método get para obtener el valor en la clase.

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

Aquí hay una nota@Deprecated

Agregue @Deprecatedal método, el método fallará.

EmpresaController

    @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";
    }

Código de recepción

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>

Introducción a los puntos de conocimiento de la reutilización del código jsp

• (1) El código JSP se puede reutilizar

• (2) ¿Cómo reutilizar el código jsp?
  Cree la página jsp A, guarde el código de reutilización
  , introduzca A en la página actual B
  <jsp:include page="A.jsp" />

• (3) B puede pasar parámetros a A
  <jsp:param name="jack" value="rose"/>
${param.jack}

Aquí hay un ejemplo específico:

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>

Efecto de página:

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>

## Efecto de página:

Reutilizar diagrama de transferencia de valor:

Reutilice el código jsp en este código de paginación del proyecto saas

• (1) La barra de herramientas de paginación es definitivamente reutilizable

  Encapsule el código de la barra de herramientas de paginación en company-list.jsp en una página page.jsp separada.

  Si necesita utilizar esta barra de herramientas de paginación en la página posterior, puede introducir page.jsp en la página.

   <!--原本在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) Re-modificar la expresión el de la página

Efecto: (para las pruebas, configuro el pageSize = 2 predeterminado en CompanyController)