我正在使用 1.0.1 版的蒲公英-Thymeleaf。下面是我的蒲公英数据表的定义。表格中有 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 时出现 javascript 错误TypeError: col is undefined
,jquery.dataTables.js
我可以看到它遍历表格的列,并且在调试时我可以看到 oSettings.aoColumns 中只有 3 个固定列。因此,当它遇到第一个动态添加的列时处理数据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>
我究竟做错了什么?如何在渲染时向蒲公英数据表添加一些列?