分頁顯示功能介紹（圖）：
按指定的頁號獲取資料
按照指定的每頁記錄數來獲取
功能分析
分頁頁面使用到的資料有四整數，一個集合 ，參考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)
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/200621.html
標籤：其他
下一篇：CSS偽類