在动态填充表thymeleaf spring mvc中使用List.js

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

这里有两件事可能是问题：

1. thymeleaf生成和呈现的HTML与静态HTML页面的格式不同
2. 在呈现视图之前，您的JavaScript正在加载

解决方案：

1. 将Thymeleaf生成的HTML与静态HTML进行比较，并检查差异（如果您想使用此信息更新问题，以便我们提供帮助）
2. 确保仅在文档准备好后才加载javascript，而不要在使用say $（document）.ready（）之前加载。

Answer 2

嘿，我想我已经找到了问题的答案：

当我在页面中放置以下脚本时，它将起作用：

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

我认为在为动态填充表加载窗口之后，需要加载js。