在動態填充表中使用List.js百里香彈簧mvc

Question

我在動態填充表中使用List.js時遇到了問題。我的項目是在春天mvc與百里香作爲模板引擎。當我將List.js與現有的或靜態表一起使用時，它工作正常，但是當我將它用於動態填充的表時，它不起作用。

以下是事情我已經做了：這裏的值從春天來臨控制器

notification.html

<div id="box-body pad table-responsive"> 
    <input class="search" placeholder="Search" /> 
    <button class="sort" data-sort="name">Sort by ID</button> 
    <table class="table table-bordered text-center"> 
     <thead> 
      <tr> 
       <th>ID</th> 
       <th>DUMP FILE</th> 
       <th>LOG</th> 
       <th>DATE</th> 
       <th>MESSAGE</th> 
      </tr> 
      </thead> 
      <tbody class = "list"> 
      <tr th:each="searchNotification : ${backupSearchNotification}"> 
       <td class = "name" th:text="${searchNotification.id}"></td> 
       <td class = "dumpfile" th:text="${searchNotification.dumpfile}"></td> 
       <td class = "log" th:text="${searchNotification.log}"></td> 
       <td class = "endtime" th:text="${searchNotification.endtime}"></td> 
       <td class = "status" th:if="${searchNotification.status == 0}"><span class="label label-default" style="width: 50px;"><b>Created</b></span></td> 
       <td class = "status" th:if="${searchNotification.status == 1}"><span class="label label-primary"><b>Running</b></span></td> 
       <td class = "status" th:if="${searchNotification.status == 2}"><span class="label label-success"><b>Completed with 
                 Success</b></span></td> 
       <td class = "status" th:if="${searchNotification.status == 3}"><span class="label label-info" style="width: 50px;"><b>Completed 
                 with MDHASH</b></span></td> 
       <td class = "status" th:if="${searchNotification.status == 100}"><span class="label label-danger" style="width: 50px;"><b>Stopped 
                 with Error</b></span></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

<div layout:fragment="script"> 
    <script> 
     var options = { 
      valueNames: [ 'name' ] 
     }; 
     var userList = new List('box-body pad table-responsive', options); 
    </script> 
</div> 

，它是正確的顯示它。但搜索不起作用。同時，如果我將動態表更改爲普通靜態表，如下所示：

<div id="box-body pad table-responsive"> 
    <input class="search" placeholder="Search" /> 
    <button class="sort" data-sort="name">Sort by name</button> 
    <table class="table table-bordered text-center"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Year</th> 
      </tr> 
      </thead> 
     <tbody class = "list"> 
      <tr> 
       <td class = "name">Jonny</td> 
       <td class = "born">1991</td> 
      </tr> 
      <tr> 
       <td class = "name">Harry</td> 
       <td class = "born">1992</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

而且腳本是一樣的。然後List.js對這個靜態表格工作正常，該列表被過濾。

那麼請任何人都可以幫助我？我想過濾動態填充表中的搜索。

在此先感謝！

乾杯！

動態表生成HTML

靜態表生成HTML

Answer 1

嘿，我想我已經找到了問題的答案：

當我把下面的腳本的頁面，然後它的工作原理：

<script> 
    window.onload = function(){ 
     var options = { 
      valueNames: [ 'name', 'dumpfile' ] 
     }; 
     var userList = new List('box-body pad table-responsive', options); 
    }; 
</script> 

我認爲爵士需要加載在爲動態填充表加載窗口之後。

Answer 2

有兩件事可能是問題就在這裏：

1. 生成和thymeleaf呈現的HTML是不同的格式，以您的 靜HTML頁面
2. 您的JavaScript正在加載b安伏您的觀點呈現

解決方案：

1. 比較通過Thymeleaf對靜態HTML生成的HTML和檢查的差異（如果您想使用此信息更新你的問題，所以我們可以幫助）
2. 確保只有在文檔準備就緒後才能加載JavaScript，而不是在使用$（document）.ready（）之前加載。