springboot pagehelper thymeleaf分页详细代码讲解，上一页，下一页，页码遍历，省略号

系统管理员 2024-04-18 10:17 65阅读 0赞

1.后台返回的数据

@RequestMapping("/bourse")
 public ModelAndView bourse(Model model, Integer pageNum) {
 List<DicType> dicTypes = dicTypeService.showAlL();
 model.addAttribute("area", dicTypes);
 PageInfo<Map<String, Object>> page = bourseService.findItemByPage(pageNum, 50);
 model.addAttribute("bourse", page);
 return new ModelAndView("bourse");
 }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]  
2.前端封装

<th:block th:if="${bourse.pageNum==1}">
 
 </th:block>
 <th:block th:if="${bourse.pageNum>1}">
 <a th:href="@{/bourse(pageNum=${bourse.pageNum-1})}">
 </a>
 </th:block>
 
 <th:block th:each="i :${#numbers.sequence(1, bourse.pages)}">
 <a th:href="@{/bourse(pageNum=${i})}">
 
 
 <th:block th:text="${i}"></th:block>
 
 </a>
 </th:block>
 
 
 <th:block th:if="${bourse.pageNum==bourse.pages}">
 
 </th:block>
 <th:block th:if="${bourse.pageNum<bourse.pages}">
 <a th:href="@{/bourse(pageNum=${bourse.pageNum+1})}">
 
 </a>
 </th:block>
 </div>
 </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]  
3.效果，css自己写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9159604a811b454393421dc73ebcc8ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4b6f146601604f47a3dcb5a1dac0ecf6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjE4NjY0_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3a2e328e2ec1417d9f57c916d835d328.png