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

Posted 2023-05-07

【中文标题】引导数据表无法与 thymeleaf th:block 一起正常工作

【英文标题】：Bootstrap datatables does not work correctly with thymeleaf th:block

【发布时间】：2020-12-29 03:34:51

【问题描述】：

当使用TableData 或bootstrap 时，我得到nTd is undefined。我已经在许多论坛中读到这是因为标题和正文元素中的td 和th 的数量不同。 但我认为它应该工作。我数过tds 和ths 的数量，它们是一样的。 这是我的代码：

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

【问题讨论】：

您能否展示最终 html 输出的示例，并说明您是否正确包含 DataTable，因为它是第 3 方插件。

@Robert 感谢您的快速回复。我更新了我的问题。

再次检查您的表结构是否正确。看起来您在表格主体的<tr> 之外使用了<th>。这可能会导致列计数导致错误。列数必须相同，而不是行数。因此，如果您有 4 个标题（例如：姓名、年龄、出生日期、电子邮件），DataTables 期望每行数据包含 4 列。

@非常感谢。你说得对。如果我删除 th:block 部分并添加一些简单的元素，它就可以工作。但是您知道如何解决保留 th:block 的问题吗？如果我在 周围添加 我会收到另一个关于知道 element.key 的错误。 像<td> 一样，<th> 标签需要包裹在<tr>...</tr> 中才能正确呈现。如果您对所描述的 :block 方面有疑问，则它可能与您的 HTML 的最终输出更相关。

【参考方案1】：

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

【讨论】：

非常感谢。您提出的逻辑有效:)。您的代码不能直接工作。但是我尝试了以下方法并且它起作用了：

某事 某事

@user1419243 我预计代码可能无法运行，因为我直接在 SO 中键入它。但我很高兴你有你的解决方案。 th:if 和 th:unless 太过分了，你应该考虑使用 Conditional expressions。最好的问候，

非常感谢，我试试看:)。