快捷導(dǎo)航

Javaweb使用thymeleaf局部刷新結(jié)合Layui插件實(shí)現(xiàn)Html分頁(yè)

更新時(shí)間：2021年10月26日 08:54:45 作者：善良勤勞勇敢而又聰明的老楊

本文主要介紹了Javaweb使用thymeleaf局部刷新結(jié)合Layui插件實(shí)現(xiàn)Html分頁(yè)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1、前言

最近個(gè)人在做開(kāi)發(fā)的時(shí)候，需要實(shí)現(xiàn)前端的Html頁(yè)面分頁(yè)。由于好一段時(shí)間沒(méi)寫(xiě)前端的代碼了，有些生疏了?，F(xiàn)就實(shí)踐成果，做下記錄與分享！

2、正文

2.1 開(kāi)發(fā)環(huán)境介紹

后端：SpringBoot、Thymeleaf

前端：Html、Jquery、Layui插件

2.2 實(shí)現(xiàn)代碼

html頁(yè)面代碼：

<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%">景點(diǎn)名稱</th>
    <th width="10%">圖片</th>
    <th>景點(diǎn)類(lèi)型</th>
    <th>門(mén)票價(jià)格</th>
    <th>景點(diǎn)負(fù)責(zé)人</th>
    <th width="10%">創(chuàng)建時(shí)間</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">收費(fèi)</span>
      <span th:case="2">免費(fèi)</span>
    </td>
    <td th:text="${view.price == null or view.price == '' ? '暫無(wú)' : 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>
...
 
//分頁(yè)
layui.use('laypage', function () {
    var laypage = layui.laypage;
 
    var total = 0;
    var limit = 6;
 
    //獲取列表總數(shù)量
    $.ajax({
        url: '/view/count.do',
        type: 'POST',
        dataType: 'json',
        async: false,
        success: function (data) {
            if(data != null){
                total = data;
            }
        }
    });
 
 
    //執(zhí)行一個(gè)laypage實(shí)例
    laypage.render({
        elem: 'pageDiv', //注意，這里的 pageDiv 是 ID，不用加 # 號(hào)
        count: total, //數(shù)據(jù)總數(shù)，從服務(wù)端得到
        limit: limit,//頁(yè)面展示數(shù)據(jù)條數(shù)
        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頁(yè)面名稱，refreshList是html頁(yè)面內(nèi)定義的元素名稱，在html頁(yè)面內(nèi)可以看到
  return "viewList::refreshList";
}

這里說(shuō)明一下，初次進(jìn)入頁(yè)面的時(shí)候，我這邊使用的是另外一個(gè)GET類(lèi)型的請(qǐng)求獲取的數(shù)據(jù)，跟上面的POST請(qǐng)求接口幾乎一樣。

2.3 實(shí)現(xiàn)流程說(shuō)明

通過(guò)Layui的分頁(yè)插件代碼，點(diǎn)擊上下頁(yè)的時(shí)候，調(diào)用上面JS中的代碼。并獲取Layui當(dāng)前的分頁(yè)的參數(shù)，請(qǐng)求后端列表接口。然后通過(guò)thymeleaf的

th:fragment="refreshList"

將后端返回的數(shù)據(jù)，局部刷新到Html指定元素中。。。從而實(shí)現(xiàn)局部刷新的分頁(yè)實(shí)現(xiàn)?。?！

2.4 實(shí)現(xiàn)效果

3、總結(jié)

到此這篇關(guān)于Javaweb使用thymeleaf局部刷新結(jié)合Layui插件實(shí)現(xiàn)Html分頁(yè)的文章就介紹到這了,更多相關(guān)Javaweb Html分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: