如何解决Bootstrap数据表不能与thymeleaf th:block一起正常工作
使用nTd is undefined
中的TableData
时得到bootstrap
。我已经在许多论坛上读到它的原因是因为header和body元素中的td
和th
的数量不同。
但是我认为它应该起作用。我计算了td
和th
的数量,它们是相同的。
这是我的代码:
<table id="searchResultTable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<th:block th:each="element,iterStat : ${searchResult}">
<tr>
<td class="underline font-weight-bold" colspan="3"
data-toggle="collapse" th:data-target="|.demo${iterStat.count}|"
th:text="${element.key}" />
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr th:id="'demo'+ ${iterStat.index}"
th:class="|accordian-body collapse demo${iterStat.count}|"
th:each="anews : ${element.value}">
<td class="boldanditalic" th:text="${anews.getDate()}">Date</td>
<td class="boldanditalic" th:text="${anews.user.getFullname()}">
writer</td>
<td th:if="${!#strings.equals(anews.fp,'')}"
th:text="'$'+${anews.fp}">fp</td>
<td th:if="${!#strings.equals(anews.sep,'')}"
th:text="'$'+${anews.sep}">sep</td>
<td th:if="${!#strings.equals(anews.tp,'')}"
th:text="'$'+${anews.tp}">tp</td>
<td th:if="${!#strings.equals(anews.fop,'')}"
th:text="'$'+${anews.fop}">fop</td>
<td th:if="${!#strings.equals(anews.fp,'')}"
th:text="'$'+${anews.fp}">SP</td>
<td th:if="${!#strings.equals(anews.sip,'')}"
th:text="'$'+${anews.sip}">SP</td>
<td th:if="${!#strings.equals(anews.sp,'')}"
th:text="'$'+${anews.sp}">SP</td>
</tr>
</th:block>
</tbody>
</table>
我什至尝试在标题中添加<th>
块。但这没有用。
非常感谢您的帮助。
更新: 我在标题部分添加了以下代码:
<script>
$(document).ready(function() {
$('#searchResultTable').dataTable();
});
</script>
在这里您可以在标题中找到链接和脚本:
<script
src="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"></script>
<link
href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"
rel="stylesheet">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link
href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css"
rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
更新2:如果我删除th:block
部分并添加一些简单的元素,它将起作用。
解决方法
在<thead>
行中,您有9个单元格,我们假设这是您想要的;
在<tbody>
内,您有2行:
- 第一行有9个单元格,但第一行有
colspan=3
,根据您的<thead>
行,总共将为您提供11个单元格。应该在删除2个空单元格或删除colspan
中修复此问题。 - 第二行有9个单元格,但最后7个单元格是有条件的,您可能根本没有它们,也可能有一些。为了保持表格的正确结构,您应该从单元格中删除条件并始终保持它们。
基本上,您的代码可能看起来像...(由于我没有尝试过此代码,所以我可能会漏掉一些东西,但是您会发现一个主意)
<table id="searchResultTable">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<th:block th:each="element,iterStat : ${searchResult}">
<tr>
<td class="underline font-weight-bold" colspan="3"
data-toggle="collapse" th:data-target="|.demo${iterStat.count}|"
th:text="${element.key}"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr th:id="'demo'+ ${iterStat.index}"
th:class="|accordian-body collapse demo${iterStat.count}|"
th:each="anews : ${element.value}">
<td class="boldanditalic" th:text="${anews.getDate()}">Date</td>
<td class="boldanditalic" th:text="${anews.user.getFullname()}">
writer</td>
<td th:text="${!#strings.equals(anews.fp,'')}? ${'$'+ anews.fp} : ''">fp</td>
<td th:text="${!#strings.equals(anews.sep,'')}? ${'$'+ anews.sep} : ''">sep</td>
<td th:text="${!#strings.equals(anews.tp,'')}? ${'$'+ anews.tp} : ''">tp</td>
<td th:text="${!#strings.equals(anews.fop,'')}? ${'$'+ anews.fop} : ''">fop</td>
<td th:text="${!#strings.equals(anews.sp,'')}? ${'$'+ anews.sp} : ''">sp</td>
<td th:text="${!#strings.equals(anews.sip,'')}? ${'$'+ anews.sip} : ''">sip</td>
<td th:text="${!#strings.equals(anews.fp,'')}? ${'$'+ anews.fp} : ''">fp</td>
</tr>
</th:block>
</tbody>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。