分页显示功能介绍(图):
按指定的页号获取数据
按照指定的每页记录数来获取
功能分析
分页页面使用到的数据有四整数,一个集合 。参考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表达式