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>