以前写过一篇使用thymeleaf实现div中加载html
大部分内容都没问题，只是部分知识已经过时了。
重新记录：
依赖依然是
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
index.html作为layout模板，不需要引入xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
引入xmlns:layout="http://www.w3.org/1999/xhtml"就可以
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml" > <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link> <script src="../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script> <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script> <title>客户管理系统</title> </head> <body> <div th:replace="fragments/navTitle::navTitle"></div> <div layout:fragment="content"></div> <th:block layout:fragment = "bodyAssets"> </th:block>
list.html作为content直接显示在index.html 的<div layout:fragment="content"></div>里
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorator="~{index}" 这里就是指向index.html > <head>
<!--这里注销是避免和index.html里的css重复-->
<!--<link rel="stylesheet" href="../../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}"></link>-->
<title>客户列表</title> </head> <body> <div class="container" layout:fragment="content"> <!--<div class="container form-group">--> <!--<div class="col-sm-2 control-label">--> <!--<a href="/customer/add" th:href="@{/customer/add}" class="btn btn-info">add</a>--> <!--</div>--> <!--</div>--> <table class="table table-hover table-striped table-bordered"> <thead> <tr> <th>#</th> <th>filesNo</th> <th>customerName</th> <th>agreementNum</th> <th>agreementMoney</th> <th>inRoomNum</th> <th>编辑</th> <th>删除</th> </tr> </thead> <tbody> <!--等同于 <tr th:each="customer : ${customerPage.Content()}">--> <tr th:each="customer : ${customerPage.getContent()}"> <!--等同于<th scope="row" th:text="${customer.getCustomerId()}">1</th>--> <th scope="row" th:text="${customer.customerId}">1</th> <td th:text="${customer.filesNo}">neo</td> <td><a th:href="@{/customer/toEdit/{id}/{pageNo}(id=${customer.customerId},pageNo=${pageIndex})}" th:text="${customer.customerName}">detail</a></td> <td th:text="${customer.agreementNum}">6</td> <td th:text="${customer.agreementMoney}">6</td> <td th:text="${customer.inRoomNum}">6</td> <td><a th:href="@{/customer/toEdit/{id}/{pageNo}(id=${customer.customerId},pageNo=${pageIndex})}">编辑</a></td> <td><a th:href="@{/customer/delete/{id}(id=${customer.customerId})}">删除</a></td> </tr> </tbody> </table> <div class="text-right"> <input type="hidden" name="customerName" th:value="${customerName}"> <ul class="pagination" > <li class="text-center"><a th:text="'共计'+${customerPage.getTotalPages()}+'页'"></a></li> <li th:class="${pageIndex==1}?'disabled' : ''" th:if="${pageIndex-1 >=1}"><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-1})}">上一页</a></li> <li th:if="${pageIndex-3 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-3})}" th:text="${pageIndex -3}" >1</a></li> <li th:if="${pageIndex-2 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-2})}" th:text="${pageIndex -2}" >1</a></li> <li th:if="${pageIndex-1 >=1}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex-1})}" th:text="${pageIndex -1}" >1</a></li> <li class="active"><a href="#" th:text="${pageIndex}" >1</a></li> <li th:if="${pageIndex+1 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+1})}" th:text="${pageIndex +1}" >1</a></li> <li th:if="${pageIndex+2 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+2})}" th:text="${pageIndex +2}" >1</a></li> <li th:if="${pageIndex+3 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+3})}" th:text="${pageIndex +3}" >1</a></li> <li th:class="${pageIndex==customerPage.getTotalPages()}?'disabled' : ''" th:if="${pageIndex+1 <=customerPage.getTotalPages()}" ><a th:href="@{/customer/list/{pageNo}/{msg}(msg=${customerName},pageNo=${pageIndex+1})}">下一页</a></li> </ul> </div> <br> </div> <script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/js/jquery-3.3.1.min.js}"></script> <!-- 在这里引入是避免和index.html里重复引入，单页也可以安全调试--> <script src="../../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script> </body> </html>