分页插件
添加依赖
<dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>5.2.0</version> </dependency>
配置插件
<plugins> <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin> </plugins>
分页插件的使用
几种须知的条件
limit index, pageSize
index : 当前页的起始索引
pageSize : 每页显示的数据条数
pageNum : 当前页的页码
count :总记录数
totalPage :总页数 totalPage = count / pageSize
//如果从记录数 / 每页显示的数据 结果无法整除 //这种情况就是还有几条多余的数据无法显示,需要我们自己再添加一页进行显示 if(count % pagesize != 0){ totalPage += 1; }
举例说明:
pageSize = 4 ,pageNum = 1, index= 0 limit 0 ,4 pageSize = 4 ,pageNum = 3, index= 8 limit 8 ,4 pageSize = 4 ,pageNum = 6, index= 20 limit 20 ,4 //每页显示4条数据 ,如果当前页为1 , 那么数据的索引就是从0开始 ,limit后面的数据就是从0 开始,页面显示数据为4条 //每页显示4条数据 ,如果当前页为3 , 那么数据的索引就是从前两页显示完后的数据(需要显示的数据就是从9 - 12),也就是从2*4=8开始 ,limit后面的数据就是从8开始,页面显示数据为4条 //每页显示4条数据 ,如果当前页为6 , 那么数据的索引就是从前两页显示完后的数据(需要显示的数据就是从21 - 24),也就是从5*4=20开始 ,limit后面的数据就是从20开始,页面显示数据为4条
list.forEach(System.out::println);列表查询
PageInfo中的属性
public class PageInfo<T> implements Serializable { private static final long serialVersionUID = 1L; private int pageNum; //当前页的页码 private int pageSize; //每页显示的数据 private int size; //当前页显示的真实条数 private int startRow; //当前页从第几行开始 private int endRow; //当前页从而几行结束 private long total; //总共有多少条数据 private int pages; //总共页数 private List<T> list; //存储的数据 private int prePage; //上一页的页码 private int nextPage; //下一页的页码 private boolean isFirstPage;//是否为第一页 private boolean isLastPage;///是否为最后一页 private boolean hasPreviousPage;//是否有上一页 private boolean hasNextPage;//是否有下一页 private int navigatePages;//当前导航分页的页码数 private int[] navigatepageNums;//导航分页的总页码 private int navigateFirstPage; private int navigateLastPage;
后端
开启分页显示
@RequestMapping("/list/{pageNum}") public String pageStart(@PathVariable("pageNum") Integer pageNum, Model model){ PageInfo<employee> page = employeeService.Page(pageNum); List<employee> list = page.getList(); model.addAttribute("list",list); model.addAttribute("page",page); return "list"; }
在service层中开启分页以及获取数据,然后将数据回显到controller层
@Override public PageInfo<employee> Page(Integer pageNum) { //开启分页功能,每页显示8条数据 PageHelper.startPage(pageNum,8); List<employee> list = EmpMapper.selectAll(); for(employee li : list){ dept dept = DeptMapper.selectByPrimaryKey(li.getDeptId()); li.setDep(dept); } PageInfo<employee> pageInfo = new PageInfo<>(list,4); return pageInfo; }
前端
<!--分页的相关功能--> <div style="text-align: center" > <!--判断是否有前一页--> <span th:if="${page.hasPreviousPage}"> <a class="btn btn-sm btn-primary" th:href="@{/list/1}">首页</a> <a class="btn btn-sm btn-primary" th:href="@{'/list/' + ${page.prePage}}">上一页</a> </span> <!--显示需要展示的页码范围 ,通过navigatepage 来进行设置范围--> <span th:each="num : ${page.navigatepageNums}"> <a class="btn btn-sm btn-primary" th:if="${page.pageNum==num}" th:href="@{'/list/'+${num}}" th:text="'['+${num}+']'" style="color:#d51313;"></a> <a class="btn btn-sm btn-primary" th:if="${page.pageNum!=num}" th:href="@{'/list/'+${num}}" th:text="${num} "></a> </span> <!--判断是否有下一页数据--> <span th:if="${page.hasNextPage}"> <a class="btn btn-sm btn-primary" th:href="@{'/list/'+${page.nextPage}}">下一页</a> <a class="btn btn-sm btn-primary" th:href="@{'/list/'+${page.pages}}">末页</a> </span> </div>
通过超链接发送请求的参数,然后通过与controller请求映射进行匹配,从而将请求发送至后端来处理