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");
}
2.前端封装
<!-- 上一页-->
<!-- 如果为第一页,则没有a标签-->
<th:block th:if="${bourse.pageNum==1}">
<span class="last"></span>
</th:block>
<th:block th:if="${bourse.pageNum>1}">
<a th:href="@{/bourse(pageNum=${bourse.pageNum-1})}">
<span class="last"></span></a>
</th:block>
<!-- 页码遍历-->
<th:block th:each="i :${#numbers.sequence(1, bourse.pages)}">
<a th:href="@{/bourse(pageNum=${i})}">
<!-- 当前页样式为on-->
<span th:class="${bourse.pageNum == i}? 'on' :''">
<th:block th:text="${i}"></th:block>
</span>
</a>
</th:block>
<!--下一页-->
<!-- 如果为最后一页也没有a标签-->
<th:block th:if="${bourse.pageNum==bourse.pages}">
<span class="next"></span>
</th:block>
<th:block th:if="${bourse.pageNum<bourse.pages}">
<a th:href="@{/bourse(pageNum=${bourse.pageNum+1})}">
<span class="next"></span>
</a>
</th:block>
</div>
</div>
3.效果,css自己写