javascript - Using List.js in dynamic populated table thymeleaf spring mvc -


i having trouble in using list.js in dynamically populated table. project in spring mvc thymeleaf templating engine. when used list.js existing or static table, worked fine @ same when use table populated dynamically, doesn't work.

following thing have done:

notification.html

<div id="box-body pad table-responsive">     <input class="search" placeholder="search" />     <button class="sort" data-sort="name">sort 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                                                         success</b></span></td>                 <td class = "status" th:if="${searchnotification.status == 3}"><span class="label label-info" style="width: 50px;"><b>completed                                                         mdhash</b></span></td>                 <td class = "status" th:if="${searchnotification.status == 100}"><span class="label label-danger" style="width: 50px;"><b>stopped                                                         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>

the values here coming spring controller , displaying right. search not working. @ same time if change dynamic table normal static table following:

<div id="box-body pad table-responsive">     <input class="search" placeholder="search" />     <button class="sort" data-sort="name">sort 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>

and script same. list.js working fine static table, list filtered.

so please can me this?? want filter search in dynamically populated table.

thanks in advance!!!

cheers!!!

dynamic table generation html dynamic_table

static table generation html static_table

two things problem here:

  1. html generated , rendered thymeleaf different format static html page
  2. your javascripts loading before view rendered

solutions:

  1. compare html generated thymeleaf against static html , check differences (if want update question information can help)
  2. ensure javascript loaded once document ready , not before using $( document ).ready();

Comments

Post a Comment