Spring Boot + pageHelper 实现简单分页 前后端
不会使用js,只实现了简单的分页。
准备环境
pow.xml导入依赖
<!-- 增加对PageHelper的支持 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>4.1.6</version> </dependency>
编写PageHelperConfig类
PageHelperConfig类的作用就是:开启一些我们需要的功能。
需要的功能看注解。
import java.util.Properties; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import com.github.pagehelper.PageHelper; @Configuration public class PageHelperConfig { @Bean public PageHelper pageHelper() { PageHelper pageHelper = new PageHelper(); Properties p = new Properties(); //1.offsetAsPageNum:设置为true时,会将RowBounds第一个参数offset当成pageNum页码使用. p.setProperty("offsetAsPageNum", "true"); //2.rowBoundsWithCount:设置为true时,使用RowBounds分页会进行count查询. p.setProperty("rowBoundsWithCount", "true"); //3.reasonable:启用合理化时,如果pageNum<1会查询第一页,如果pageNum>pages会查询最后一页。 p.setProperty("reasonable", "true"); pageHelper.setProperties(p); return pageHelper; } }
后端Controller代码
后端Controller的作用就是:获取分页信息,然后传入前端。
PageInfo对象里面包含了我们分页所需要的所有信息:像是前一页页码,前一页有没有,一共多少页,当前页的页码等等,都有。
@Autowired private UserMapper userMapper; @RequestMapping("/index") public String selectUser(Model model, Integer selectId, @RequestParam(value="currentPage",defaultValue="1")int currentPage, @RequestParam(value = "size", defaultValue = "5") int size) throws Exception { //1. 在参数里接受当前是第几页 start ,以及每页显示多少条数据 size。 默认值分别是1和5。 //2. 根据start,size进行分页 PageHelper.startPage(currentPage,5); //3. 因为PageHelper的作用,这里就会返回当前分页的集合了 List<User> cs=new LinkedList<User>(); cs = userMapper.findAllUser(); //4. 根据返回的集合,创建PageInfo对象 PageInfo<User> page = new PageInfo<>(cs); //5. 把PageInfo对象扔进model,以供后续显示 System.out.println(page); model.addAttribute("users",page.getList()); model.addAttribute("page", page); //6. 跳转到html return "selectUser"; }
编写前端代码
前端代码作用就是获取后端传入的信息,并将他展示
<div align="center" class="container-fluid" > <table class="table"> <tr> <th>用户编号</th> <th>用户名字</th> <th>生日</th> <th>性别</th> <th>地址</th> <th>操作</th> </tr> <tr th:each="user:${users}"> <td th:text="${user.id}">空</td> <td th:text="${user.userName}">空</td> <td th:text="${user.birthday} ">空</td> <td th:text="${user.sex}">空</td> <td th:text="${user.address}">空</td> <td> <a th:href="@{/toUpdateUser(id=${user.id})}">修改</a> <a onclick="return confirm('确定删除吗?')" th:href="@{/deleteUser(id=${user.id})}">删除</a> </td> </tr> </table> <br> <div > <nav aria-label="Page navigation example "> <ul class="pagination justify-content-center"> <li class="page-item"> <a class="page-link disabled" th:text="'共 '+ ${page.getPages()}+ ' 页'"> <!-- <b > </b>--> </a> </li> <li class="page-item"> <a class="page-link" th:href="@{/index(currentPage=${page.getFirstPage()})}" href="#">首页</a> </li> <li class="page-item"> <a class="page-link" th:if="${page.hasPreviousPage} == true" th:href="@{/index(currentPage=${page.getPrePage()})}" href="#" th:text="${page.prePage}+' '" >上一页</a> </li> <li class="page-item active"> <a class="page-link" href="#" th:text="${page.pageNum}+' '" th:href="@{'/index?currentPage=' + ${page.pageNum}}" /> </li> <li class="page-item" > <a class="page-link" href="#" th:if="${page.hasNextPage} == true" th:href="@{/index(currentPage=${page.getNextPage()})}" th:text="${page.nextPage}+' '" >下一页</a> </li> <li class="page-item" > <a class="page-link" href="#" th:href="@{/index(currentPage=${page.getLastPage()})}">尾页</a> </li> </ul> </nav> </div> <br> </div>
本文作者:kingwzun
本文链接:https://www.cnblogs.com/kingwz/p/16745250.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步