saas-exportプロジェクト-会社レコードリストのページネーション表示

ページ表示機能の紹介(写真):

ここに写真の説明を挿入

指定されたページ番号に従ってデータを取得します

ここに写真の説明を挿入

1ページあたりの指定レコード数に応じて取得

ここに写真の説明を挿入

機能解析

ページングページで使用されるデータには、4つの整数セットがあります。参照PageBeanクラス

4つの整数は

  • 総ページ数

  • 合計

  • 1ページあたりのレコード数

  • 現在のページ番号

コレクション

  • データベースで照会された会社のレコードコレクション、表示に使用されたレコードを一覧表示します

自分で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)設定
    設定には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を設定しました)

ここに写真の説明を挿入

おすすめ

転載: blog.csdn.net/qq_37924905/article/details/109408871