SpringbootでThymeleafレンダリングされたオブジェクトを持つBootstrap3 DataTableを使用できません

Question

私はThymeleafを使用してSpringbootアプリケーションの一部のオブジェクトをレンダリングしています。私はこのコードスニペット（ブートストラップ3データテーブルの例）のテーブルを使用しています：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：上記Sigristによって示されるよう

<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

、tbody TR下2つの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>