spring boot中默認使用的是thymeleaf,一直沒有時間給博客加個分頁几苍。
聽前端同事推薦的jquery.page.js不錯众眨,于是今天就搞了一下懦鼠。
第1步:在模板中添加JS引用
<script src="/js/jquery.min.js" ></script>
<script src="/js/jquery.page.js" ></script>
第2步:模板中添加分頁板塊
<div layout:fragment="page" class="main-content index-page clearfix"></div>
第3步:內容中添加分頁信息
<div layout:fragment="page" class="main-content index-page clearfix">
<div class="tcdPageCode"></div>
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(".tcdPageCode").createPage({
pageCount: /*[[${result.totalPages}]]*/,
current: /*[[${result.page}]]*/,
backFn: function(p) {
search(p);
}
});
//查詢方法
function search(p) {
location="/?page="+p;
}
/*]]>*/
</script>
第4步:后臺配合分頁查詢
@RequestMapping(value = "/",method = RequestMethod.GET)
public String home(Map<String,Object> map,@RequestParam(defaultValue = "1") int page) {
initSeo(map,"","","");
Example example = new Example(WeiContent.class);
Criteria criteria = example.createCriteria();
example.setOrderByClause("crt_time desc ");
PageHelper.startPage(page, 12);
List<WeiContent> items = weiContentBiz.selectByExample(example);
PageInfo<WeiContent> pageInfo = new PageInfo<WeiContent>(items);
map.put("result",new TableResultResponse<WeiContent>(Integer.parseInt(String.valueOf(pageInfo.getTotal())),
page, 12,
items));
return this.render("index");
}
第5步:核對成果
avatar
原文章鏈接:thymeleaf中使用分頁