Javaweb使用thymeleaf局部刷新結合Layui插件實現Html分頁
1、前言
最近個人在做開發的時候,需要實現前端的Html頁面分頁。由於好一段時間沒寫前端的代碼瞭,有些生疏瞭。現就實踐成果,做下記錄與分享!
2、正文
2.1 開發環境介紹
後端:SpringBoot、Thymeleaf
前端:Html、Jquery、Layui插件
2.2 實現代碼
html頁面代碼:
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"> ... <table class="table table-hover text-center" id="refreshList" th:fragment="refreshList"> <tr> <th width="100" style="text-align:left; padding-left:20px;">ID</th> <th width="10%">景點名稱</th> <th width="10%">圖片</th> <th>景點類型</th> <th>門票價格</th> <th>景點負責人</th> <th width="10%">創建時間</th> <th width="20%">操作</th> </tr> <tr th:each="view : ${viewList}" > <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id" value="" /></td> <td th:text="${view.viewTitle}"></td> <td ><img th:src="${'/upload/img/'+view.pictureUrl}" alt="" width="100" height="70" /></td> <td th:switch="${view.type}"> <span th:case="1">收費</span> <span th:case="2">免費</span> </td> <td th:text="${view.price == null or view.price == '' ? '暫無' : view.price}" ></td> <td th:text="${view.manager}"></td> <td th:text="${#dates.format(view.createTime,'yyyy-MM-dd HH:mm:ss')}"></td> <td><div class="button-group"> <a class="button border-main" th:href="${'/view/edit.do?viewId='+view.id}" rel="external nofollow" ><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" rel="external nofollow" th:onclick="del([[${view.id}]])"><span class="icon-trash-o"></span> 刪除</a> </div></td> </tr> </table>
Js代碼:
<script src="/js/jquery.js"></script> <script type="text/javascript" src="/layui/layui.js"></script> <script type="text/javascript" src="/layui/layui.all.js"></script> ... //分頁 layui.use('laypage', function () { var laypage = layui.laypage; var total = 0; var limit = 6; //獲取列表總數量 $.ajax({ url: '/view/count.do', type: 'POST', dataType: 'json', async: false, success: function (data) { if(data != null){ total = data; } } }); //執行一個laypage實例 laypage.render({ elem: 'pageDiv', //註意,這裡的 pageDiv 是 ID,不用加 # 號 count: total, //數據總數,從服務端得到 limit: limit,//頁面展示數據條數 theme: '33ccff',//主題樣式 jump: function (obj, first) { if (!first) { $.ajax({ url: '/view/list.do', type: 'POST', data: {'pageSize': obj.limit, 'pageIndex': obj.curr}, success: function (data) { if (data != null) { $("#refreshList").html(data); } } }); } } }); });
後端接口:
@PostMapping("/list.do") public String getList(PageBean pageBean, Model model){ if(Objects.isNull(pageBean)) pageBean = new PageBean(); pageBean.setPageIndex((pageBean.getPageIndex()-1)*pageBean.getPageSize()); List<View> viewList = viewService.getList(pageBean); model.addAttribute("viewList",viewList); //viewList是html頁面名稱,refreshList是html頁面內定義的元素名稱,在html頁面內可以看到 return "viewList::refreshList"; }
這裡說明一下,初次進入頁面的時候,我這邊使用的是另外一個GET類型的請求獲取的數據,跟上面的POST請求接口幾乎一樣。
2.3 實現流程說明
通過Layui的分頁插件代碼,點擊上下頁的時候,調用上面JS中的代碼。並獲取Layui當前的分頁的參數,請求後端列表接口。然後通過thymeleaf的
th:fragment="refreshList"
將後端返回的數據,局部刷新到Html指定元素中。。。從而實現局部刷新的分頁實現!!!
2.4 實現效果
3、總結
到此這篇關於Javaweb使用thymeleaf局部刷新結合Layui插件實現Html分頁的文章就介紹到這瞭,更多相關Javaweb Html分頁內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 小區後臺管理系統項目前端html頁面模板實現示例
- js生成二維碼的示例代碼
- layui實際項目使用過程中遇到的兼容性問題及解決
- Vue的異步渲染axios問題
- javascript中layim之查找好友查找群組