Bootstrap 数据表无法与 thymeleaf 一起正常工作 th:block

Question

使用 bootstrap 的 TableData 时我得到 nTd is undefined。我已经在许多论坛上了解到，这是因为 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>

我什至尝试在 header 中添加 <th> 块。但它没有用。非常感谢您的帮助。

更新：我在 header 部分添加了以下代码：

<script>
    $(document).ready(function() {
        $('#searchResultTable').dataTable();
    });
</script>

在这里您可以找到 header 中的链接和脚本：

<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 部分并添加一些简单的元素，它会起作用。

Answer 1

在 <thead> 行中有 9 个单元格，我们假设这就是您想要的；

在 <tbody> 里面你有 2 行：

第一行有 9 个单元格，但第一个单元格有 colspan=3，根据你的 <thead> 行，总共有 11 个单元格。这应该在删除 2 个空单元格或删除 colspan.
第二行有 9 个单元格，但最后 7 个单元格是有条件的，您可能根本没有或有一些。要保持 table 的正确结构，您应该从单元格中删除条件并始终保留它们。

基本上你的代码可能看起来像......（我可能会错过一些东西，因为我没有尝试这个代码，但你会明白的）

    <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>

Bootstrap 数据表无法与 thymeleaf 一起正常工作 th:block

Bootstrap datatables does not work correctly with thymeleaf th:block

html

twitter-bootstrap

datatables

jquery-plugins

thymeleaf