实现分页有两个基本思想:
- 后台加载全部数据,在前台进行分割
- 后天获取前台当前需要显示的数据
我采用的是第一个,加载完成所有的数据,利用pagehelper插件显示
- 配置
pom.xml添加依赖
<!--分页依赖-->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.0.0</version>
</dependency>
程序入口Application
//配置mybatis的分页插件pageHelper
@Bean
public PageHelper pageHelper() {
PageHelper pageHelper = new PageHelper();
Properties properties = new Properties();
properties.setProperty("offsetAsPageNum", "true");
properties.setProperty("rowBoundsWithCount", "true");
properties.setProperty("reasonable", "true");
properties.setProperty("dialect", "mysql"); //配置mysql数据库的方言
pageHelper.setProperties(properties);
return pageHelper;
}
- controller层
- 获取数据
List<HeBeiZbgg> hebeiZbggs = accountService.getHebeiZbgg();
- 设置pagestart
PageHelper.startPage(pageCode, pageSize);
- 加载pageInfo即显示的列表
PageInfo<HeBeiZbgg> pageData = new PageInfo<>(hebeiZbggs);
- 将pageInfo对象传给前台
model.addAttribute("pageData", pageData);
- HTML层 利用封装好的插件 需要完成以下几步来实现与自己程序的对接
- 将当前页,总页数,页面大小,总记录数赋值即按照自己选的的样式中需要的属性值自己通过js赋值
- 添加跳转,连接后台
所以在这里总结pageInfo的属性:
//当前页
private int pageNum;
//每页的数量
private int pageSize;
//当前页的数量
private int size;
//由于startRow和endRow不常用,这里说个具体的用法
//可以在页面中"显示startRow到endRow 共size条数据"
//当前页面第一个元素在数据库中的行号
private int startRow;
//当前页面最后一个元素在数据库中的行号
private int endRow;
//总记录数
private long total;
//总页数
private int pages;
//结果集(每页显示的数据)
private List<T> list;
//第一页
private int firstPage;
//前一页
private int prePage;
//是否为第一页
private boolean isFirstPage = false;
//是否为最后一页
private boolean isLastPage = false;
//是否有前一页
private boolean hasPreviousPage = false;
//是否有下一页
private boolean hasNextPage = false;
//导航页码数
private int navigatePages;
//所有导航页号
private int[] navigatepageNums;
HTML层代码总体展示:
<script th:inline="javascript">
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//完整功能
laypage.render({
elem: 'demo7'
,pages:[[${pageData.pages}]]//总共页数
,curr:[[${pageData.pageNum}]]//当前页
,count:[[${pageData.total}]]//总记录数
,limit:[[${pageData.pageSize}]]//列表大小
,limits:[6,10,20]
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj,first){
/*console.log(obj.page);
console.log(obj.limit);
//首次不执行
if(!first){
//do something
}*/
if(!first){
//do something
window.location.href = "/gg?pageCode=" + obj.curr + "&pageSize=" + obj.limit;//跳转链接
}
}
});
});
</script>
- 跳转解读:如果不是第一次加载,则跳转,跳转时传递的参数为当前页及页面大小
- 后台获取传递的参数以及设置默认值,本实例当前页设置为1,页面大小为6
所以controller层代码如下:
public String login_gg(@RequestParam(value = "pageCode", defaultValue = "1") Integer pageCode, @RequestParam(value = "pageSize", defaultValue = "6") Integer pageSize, Model model, HttpSession session) throws UnsupportedEncodingException {
System.out.println("================login_gg===================");
//session.setAttribute("","");
//用户名字
//request.getSession().setAttribute("accountName", account.getUsername());
model.addAttribute("accountName", account.getUsername());
//当前页和页面大小
PageHelper.startPage(pageCode, pageSize);
//河北招标公告
List<HeBeiZbgg> hebeiZbggs = accountService.getHebeiZbgg();
//加载数据
PageInfo<HeBeiZbgg> pageData = new PageInfo<>(hebeiZbggs);
//传给前台
model.addAttribute("pageData", pageData);
return "gg";
}
最大的坑!!!!!pageInfo对象为null
注意要在controller层中将设置startPage放到查询数据的前面!!!!即
public String login_gg(@RequestParam(value = "pageCode", defaultValue = "1") Integer pageCode, @RequestParam(value = "pageSize", defaultValue = "6") Integer pageSize, Model model, HttpSession session) throws UnsupportedEncodingException {
System.out.println("================login_gg===================");
//session.setAttribute("","");
//用户名字
//request.getSession().setAttribute("accountName", account.getUsername());
model.addAttribute("accountName", account.getUsername());
//当前页和页面大小
PageHelper.startPage(pageCode, pageSize);
//河北招标公告
List<HeBeiZbgg> hebeiZbggs = accountService.getHebeiZbgg();
//加载数据
PageInfo<HeBeiZbgg> pageData = new PageInfo<>(hebeiZbggs);
//传给前台
model.addAttribute("pageData", pageData);
return "gg";
}