Thymeleaf 蒲公英数据表，在页面渲染中添加了列答案

【问题标题】：Thymeleaf Dandelion Datatable with added columns at page renderThymeleaf 蒲公英数据表，在页面渲染中添加了列
【发布时间】：2017-10-30 05:52:08
【问题描述】：

我使用的是 1.0.1 版本的蒲公英-百里香叶。下面是我的蒲公英数据表的定义。表格中有 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>

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

如果我省略TBODY 部分（因此只有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>

我做错了什么？如何在渲染时向蒲公英数据表添加一些列？

【问题讨论】：

标签： jquery spring-boot datatable thymeleaf dandelion

【解决方案1】：

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

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

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

【讨论】：