Using List.js in dynamic populated table thymeleaf spring mvc

Question

I am having trouble in using List.js in dynamically populated table. My project is in spring mvc with thymeleaf as a templating engine. When I used List.js with the existing or static table, it worked fine but at the same when I use it for the table that is populated dynamically, it doesn't work.

Following is the thing i have done:

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>

The values here are coming from the spring controller and it is displaying it right. But the search is not working. At the same time if I change the dynamic table to a normal static table as following:

<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>

And the script is the same. Then the List.js is working fine for this static table, the list is filtered.

So please can anyone help me with this?? I want to filter search in dynamically populated table.

Thanks in advance!!!

Cheers!!!

dynamic table generation HTML

static table generation HTML

Answer 1

Two things could be problem here:

1. HTML generated and rendered by thymeleaf is different format to your static HTML page
2. Your javascripts are loading before your view is rendered

Solutions:

1. Compare HTML generated by Thymeleaf against static HTML and check for differences (if you want update your question with this information so we can help)
2. Ensure your javascript is loaded only once the document is ready and not before using say $( document ).ready();

Answer 2

Hey I think i have found the answer of the question:

When i put the following script in the page then it works:

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

I think the js needs to be loaded after the window is loaded for the dynamic populated table.