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步:核对成果
原文章链接:thymeleaf中使用分页