不能在Springboot中使用Bootstrap3 DataTable与Thymeleaf呈现对象

Question

我正在使用Thymeleaf在我的Springboot应用程序中将某些对象呈现给片段。我正在使用此代码片段中的表（Bootstrap 3 DataTables Example）：Bootstrap - How to sort table columns。在下面的表格中，我包含了一些随机的静态数据行。我注意到，当我删除用Thymeleaf呈现的对象并仅保留可排序表的静态数据时，但是当我从循环中包含呈现的数据时，引导表中的功能停止工作。可能会出现什么问题？我的直觉是，当渲染对象时，Thymeleaf的数据在DOM中不可用。也许本教程的某些内容可能有所帮助仍然不知道如何实施。 https://datatables.net/examples/plug-ins/dom_sort.html

指数：

<!-- Bootstrap CSS --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet"/> 

片段HTML：

<div th:fragment="requests" xmlns:th="http://www.w3.org/1999/xhtml"> 

<table id="example" class="table table-striped table-bordered table-hover" style="max-width: 85% !important;"> 
    <thead> 
     <tr> 
     <th><b>Requested By</b></th> 
     <th><b>Request Type</b></th> 
     <th><b>Reason</b></th> 
     <th><b>Requested Date</b></th> 
     <th><b>Status</b></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>asdfa</td> 
     <td>343f</td> 
     <td>asdfa</td> 
     <td>sdf</td> 
     <td>f34</td> 
     </tr> 
     <tr> 
     <td>123</td> 
     <td>asdfa</td> 
     <td>asdf</td> 
     <td>cv</td> 
     <td>asdfa</td> 
     </tr> 
     <tr th:each="request : ${requests}"> 
     <div th:switch="${request.get('requestStatus')}"> 
      <div th:case="Pending"> 
       <td th:text="${request.get('author').get('username')}" class="initial-name">Employee Initials</td> 
       <td th:text="${request.get('requestType')}">Request Type</td> 
       <td th:text="${request.get('requestText')}">Reason</td> 
       <td th:text="${request.get('dateRequested')}">Requested Date</td> 
       <td th:switch="${request.get('requestStatus')}"> 
        <th:block th:case="Pending" th:text="${request.get('requestStatus')}"><span class="nnit-red">Pending</span></th:block> 
        <th:block th:case="Approved" th:text="${request.get('requestStatus')}"><span class="green">Approved</span></th:block> 
        <th:block th:case="Rejected" th:text="${request.get('requestStatus')}"><span class="nnit-red">Rejected</span></th:block> 
       </td> 
      </div> 
     </div> 
     </tr> 
    </tbody> 
</table> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/dataTables.bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#example').DataTable(); 
     }); 
    </script> 

</div> 

Answer 1

如由以上SIGRIST所示，tbody TR下方的两个div分别导致了问题。我删除了这些。为了保留if条件，我在each声明后的行中包含了Thymeleaf标签。该表将呈现所有对象数据以及保存的自举分页和AJAX搜索功能：

<table id="example" class="table table-striped table-bordered table-hover" style="max-width: 85% !important;"> 
    <thead> 
     <tr> 
     <th><b>Requested By</b></th> 
     <th><b>Request Type</b></th> 
     <th><b>Reason</b></th> 
     <th><b>Requested Date</b></th> 
     <th><b>Status</b></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr th:each="request : ${requests}" th:if="${request.get('requestStatus') == 'Pending'}"> 
     <td th:text="${request.get('author').get('username')}" class="initial-name">Employee Initials</td> 
     <td th:text="${request.get('requestType')}">Request Type</td> 
     <td th:text="${request.get('requestText')}">Reason</td> 
     <td th:text="${request.get('dateRequested')}">Requested Date</td> 
     <td th:switch="${request.get('requestStatus')}"> 
      <th:block th:case="Pending" th:text="${request.get('requestStatus')}"><span class="red">Pending</span></th:block> 
      <th:block th:case="Approved" th:text="${request.get('requestStatus')}"><span class="green">Approved</span></th:block> 
      <th:block th:case="Rejected" th:text="${request.get('requestStatus')}"><span class="red">Rejected</span></th:block> 
     </td> 
     </tr> 
    </tbody> 
</table>