通过PageBean+Thymeleaf完成分页

不了解pageBean的建议先去看看什么是pageBean，本文重点讲的是通过thymeleaf解析
pageBean连接：https://blog.csdn.net/cxycxytony/article/details/107214486

1、编写Mapper

 /**
  * 查询文章并且根据id排序并分页
  * @param
  * @return
  */
 List<Article> selectTextByIdAndPage(@Param("startIndex") int startIndex, @Param("pageSize") int pageSize);

<!-- 更具类型分页 -->
 <select id="selectTextByIdAndPage" resultType="com.icss.pojo.Article">
     select * from article ORDER BY article_id  asc limit #{startIndex},#{pageSize};
 </select>

2、编写服务层

    // 查询所有并且根据id排序
    @Override
    public PageBean selectTextByIdAndPage(Integer page, Integer count) {
     	 // 创建一个pageBean对象
        PageBean pageBean = new PageBean();
        // 设置当前页数为多少
        pageBean.setCurrentPage(page);
        // 设置页面大小，也就是每个页面展示数据的条数
        pageBean.setCurrentCount(count);
        // 获取总共有多少条数据，可以单写一条COUNT(*)语句进行查找，这里偷了个懒
        List<Article> list = articleMapper.selectAll();
        long totalCount = list.size();
        pageBean.setTotalCount((int)totalCount);
        // 根据总条数和页面大小来判断总页数
        int totalPage = (int) Math.ceil(totalCount/(double)pageBean.getCurrentCount());
        pageBean.setTotalPage(totalPage);
        // 调用mapper查找出当前页需要展示的数据
        List<Article> articleList = articleMapper.selectTextByIdAndPage(((page - 1) * count), count);
        pageBean.setList(articleList);
        // 返回pageBean
        return pageBean;
    }

3、编写服务提供者Controller

 // 查询所有并且根据id排序(指定页数)
 @ResponseBody
 @GetMapping("/article/allByIdAndPage2/{currentPage}")
 public PageBean selectAllByIdAndPage2(@PathVariable("currentPage")Integer currentPage){
     PageBean pageBean = articleService.selectTextByIdAndPage(currentPage, 10);
     return pageBean;
 }

4、编写远程服务消费者Controller（如果不是分布式，把上面的Controller改造一下，效果相同）

    @GetMapping("/articleAdmin/allByIdAndPage2/{pageCurrent}")
    public String selectAllByLimit(@PathVariable("pageCurrent")Integer pageCurrent, Model model){
    	//********用*号包起来的是远程调用服务，这里不再赘述
        List<ServiceInstance> instances = discoveryClient.getInstances("SERVICE-PROVIDER");
        ServiceInstance instance = instances.get(0);
        URI uri = instance.getUri();
        String url = uri + "article/allByIdAndPage2/"+pageCurrent;
        //****************************************************
        // 如果是普通项目，调用服务返回的pageBean解析即可，下面这段代码的目的就是获取到pageBean
        PageBean pageBean = restTemplate.getForObject(url, PageBean.class);
        // 获取当前页要展示的信息
        List list = pageBean.getList();
        String s = JSON.toJSONString(list);
        // 将它转换为一个articles集合
        List<Article> articles = JSONObject.parseArray(s, Article.class);
        // 将articles存入到model中
        model.addAttribute("articles",articles);
        // 获取总页数并存入到model中
        int totalPage = pageBean.getTotalPage();
        model.addAttribute("totalPage",totalPage);
        // 获取当前页并存入到model中
        int currentPage = pageBean.getCurrentPage();
        model.addAttribute("currentPage",currentPage);
        return "/cate";
    }

5、在cate.html进行解析

<div>
 <table class="layui-table layui-form">
   <thead>
     <tr>
       <th width="20">
         <input type="checkbox" name="" lay-skin="primary">
       </th>
       <th width="70">ID</th>
       <th>文章名称</th>
       <th>文章内容</th>
       <th width="50">文章类型</th>
       <th width="119">发布时间</th>
       <th width="80">状态</th>
       <th width="150">操作</th>
   </thead>
   <!--有些数据我们需要使用，但是不需要显示，可以将他们们放在隐藏域中-->
   <input type="hidden" th:value="${totalPage}" id="totalPage"/>
   <input type="hidden" th:value="${currentPage}" id="currentPage"/>
   <!--这里的th:fragment="reflash"代表异步刷新的是这个标签块中的元素-->
   <tbody class="x-cate" id="tbd" th:fragment="reflash">
     <!--遍历model中传过来的articles-->
     <tr cate-id='1' fid='0' th:each="article:${articles}" >
       <td>
         <input type="checkbox" name="" lay-skin="primary">
       </td>
       <!--获取文章id-->
       <td th:text="${article.getArticleId()}">
           文章id
       </td>
       <!--获取文章名称-->
       <td th:text="${article.getArticleTitle()}">
           文章名称
       </td>
       <!--获取文章内容[[]]不会解析html标签，[()]会解析html标签-->
       <td th:inline="text">[[${article.getArticleContent()}]]</td>
       <!--获取文章类型-->
       <td th:text="${article.getArticleType()}">文章类型</td>
       <!--获取文章发布时间，这里我们可以用thymeleaf自带的函数解析时间-->
       <td th:text="${#dates.format(article.getArticleTime(),'yyyy-MM-dd')}">发布时间</td>
       <td>
         <!--注意：这里在异步刷新后可能会显示不出来，下面会有解决方法-->
         <input type="checkbox" name="switch"  lay-text="发布|停用"  checked="" lay-skin="switch">
       </td>
       <td class="td-manage">
         <button class="layui-btn layui-btn layui-btn-xs"  onclick="xadmin.open('编辑','/admin-edit')" ><i class="layui-icon">&#xe642;</i>编辑</button>
         <button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="member_del(this,'要删除的id')" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
       </td>
     </tr>
   </tbody>
 </table>
</div>
<!--页码-->
<div class="layui-card-body ">
    <div class="page">
        <div>
            <a class="prev" href="">&lt;&lt;</a>
            <!--这里需要我们动态显示全部的页码，这里使用了thymeleaf的numbers.sequence()进行了循环-->
            <a class="num" th:id="page+${i}" th:onclick="'clickPage('+${i}+')'" th:each="i:${#numbers.sequence(1,totalPage)}" th:text="${i}" style="margin-left: 2px;margin-right: 2px"></a>
            <a class="next" href="">&gt;&gt;</a>
        </div>
    </div>
</div>

6、js

// 初始情况下选中的是第一页
$(function () {
  $("#page1").css({"background":"#009688","color":"white"})
})
// 点击哪一页的索引，传过来的id就是几
function clickPage(i) {
    // 或取当前点击的页面索引的id
    var pageId = "page"+i;
    // 变化其余page开头的id的标签的css（未选中的样式）
    $('a[id^="page"]').css({"background":"#fff","color":"black"});
    // 更改点击的页的索引的样式（选中的演示）
    $("#"+pageId+"").css({"background":"#009688","color":"white"});
    $.ajax({
        url:"http://localhost:9001/articleAdmin/allByIdAndPage2/"+i,
        success:function (data) {
            // data传过来的是一个页面的html内容
            // 将它转换成dom数
            var wrappedObj = $("<code></code>").append($(data));
            // 根据id截取并刷新，这里的id和html中th:fragment="reflash"处的id一样
            var table = $("#tbd",wrappedObj);
            $("#tbd").html(table.html())
            // 重新刷新checkbox（这里就可以解决html最后提到的问题）
            layui.use('form',function () {
                var form = layui.form;
                form.render('checkbox')
            })
        }
    })
}