Question

我使用Thymeleaf将一些对象渲染到Springboot应用程序中的片段。我正在使用此代码段中的表格（ Bootstrap 3 DataTables示例）：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标记。此表将呈现所有对象数据以及保留boostrap分页和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>

不能在Springboot中使用带有Thymeleaf渲染对象的Bootstrap3 DataTable

1 个答案: