通過PageBean+Thymeleaf完成分頁

很皮的皮蛋瘦肉粥發表於2020-10-11
Bean

不瞭解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')
            })
        }
    })
}

相關文章