Thymeleaf 蒲公英数据表在页面呈现时添加了列

Question

我正在使用 1.0.1 版的 Dandelion-Thymeleaf。下面是我的蒲公英数据table的定义。在 table 中有 3 个固定列，后面是一些在页面呈现时添加的列。

<table class="reportTable" dt:table="true" dt:pageable="false" dt:filterable="false" dt:processing="false" dt:serverside="false">
    <thead>
        <tr>
            <th>Day</th>
            <th>No of calls</th>
            <th>Duration</th>
            <th:block th:each="sb : ${timePeriodColumns}">
                <th th:text="${sb}">x</th>
            </th:block>
        </tr>
    </thead>
    <tbody>
        <tr th:each="sb : ${monthCallsByTimePeriod}">
            <td th:text="${sb.day}">x</td>
            <td th:text="${sb.numberOfCallsPerDay}">x</td>
            <td th:text="${sb.callDurationPerDayInMinutes}">x</td>

            <th:block th:each="tp : ${sb.dataForTimePeriod}">
                <td th:text="${tp.numberOfCalls}">x</td>
                <td th:text="${tp.callDurationInMinutes}">x</td>
            </th:block>
        </tr>
    </tbody>
</table>

Table 可以很好地呈现 HTML，但是当 Dandelion 尝试应用 Datatable 时，我在 jquery.dataTables.js 中得到 javascript 错误 TypeError: col is undefined ，在那里我可以看到它遍历 table 的列，并且在调试时我可以看到 oSettings.aoColumns 中只有 3 个固定列。因此，当它处理来自 TBODY 的数据时，当它遇到第一个动态添加的列时，会发生错误，因为 Datatable 不会 "know" 非固定列。

如果我省略 TBODY 部分（因此只有 table 的 THEAD 部分呈现）错误不会发生，但我可以看到固定列有 Datatable的排序控件但非固定列没有这些控件，好像被排除了一样。但是查看 HTML 来源我看不出这些列之间的区别：

<thead>
    <tr>
        <th>Day</th>
        <th>No of calls</th>
        <th>Duration</th>
        <th>Added col1</th>
        <th>Added col2</th>
    </tr>
</thead>

我做错了什么？如何在渲染时向 Dandelion Datatable 添加一些列？

Answer 1

作为解决方法，我将前三列添加到 timePeriodColumns 列表，并将其留给 Thymeleaf 以呈现 <th th:each ...> 中的所有列：

<thead>
    <tr>
        <th th:each="sb : ${timePeriodColumns}" th:text="${sb}">x</th>
    </tr>
</thead>

我怀疑使用 <th:block ...> 有问题，但我无法证明。无论如何，这解决了我的问题。

Thymeleaf 蒲公英数据表在页面呈现时添加了列

Thymeleaf Dandelion Datatable with added columns at page render

datatable

jquery

thymeleaf

spring-boot

dandelion