1、前言
最近個人在做開發的時候，需要實現前端的Html頁面分頁。由于好一段時間沒寫前端的代碼了，有些生疏了。現就實踐成果，做下記錄與分享！
2、正文
2.1 開發環境介紹
后端：SpringBoot、Thymeleaf
前端：Html、Jquery、Layui插件
2.2 實現代碼
html頁面代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<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代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<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); } } }); } } });}); |
后端接口：
|
1
2
3
4
5
6
7
8
9
|
@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的
|
1
|
th:fragment="refreshList" |
將后端返回的數據，局部刷新到Html指定元素中。。。從而實現局部刷新的分頁實現！！！
2.4 實現效果
?
3、總結
到此這篇關于Javaweb使用thymeleaf局部刷新結合Layui插件實現Html分頁的文章就介紹到這了,更多相關Javaweb Html分頁內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/yy339452689/article/details/119738757
