thymeleaf中使用分页

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中使用分页