Javascript 如何在Thymeleaf中使用DataTable？_Javascript_Html_Jquery_Datatables_Thymeleaf

Javascript 如何在Thymeleaf中使用DataTable？

javascript html jquery datatables

Javascript 如何在Thymeleaf中使用DataTable？,javascript,html,jquery,datatables,thymeleaf,Javascript,Html,Jquery,Datatables,Thymeleaf,如何在thymeleaf中使用datatable。我已经创建了一个表，其中我正在为userInfo列表中的所有用户在td内部创建一个div 如何仅将一条用户记录显示为div，并且分页部分内部仅显示“下一步”和“上一步”按钮当前我收到错误jquery.min.js:2未捕获类型错误：无法读取未定义的属性“mData” 我发现了一些与之相关的答案，因为dataTables需要一个格式良好的表。它必须包含和。但我只想在单击下一步按钮时显示一个div并隐藏另一个div。新div应该可见并隐藏上一个di

如何在thymeleaf中使用datatable。我已经创建了一个表，其中我正在为

userInfo

列表中的所有用户在

td

内部创建一个

div

如何仅将一条用户记录显示为div，并且分页部分内部仅显示“下一步”和“上一步”按钮

当前我收到错误

jquery.min.js:2未捕获类型错误：无法读取未定义的属性“mData”

我发现了一些与之相关的答案，因为dataTables需要一个格式良好的表。它必须包含和。但我只想在单击下一步按钮时显示一个div并隐藏另一个div。新div应该可见并隐藏上一个div

<table id="table_id">
<tr>
 <td th:each="info : ${userInfo}">
   <p th:text=${info.name}></p>
   <p th:text=${info.dob}></p>                                     
 </td>
</tr>
</table>

下面的示例显示了一种方法，您可以使用Thymeleaf填充表，然后使用DataTables一次显示一行（使用“上一行”和“下一行”按钮）：


演示
.dataTables_paginate{
浮动：左！重要；
}
使用者


$（文档）.ready（函数（）{
$（'#表_id'）。数据表({
“dom”：“tp”，
“命令”：错误，
“pagingType”：“简单”，
“长度菜单”：[1]
});
});

这样可以创建一个非常简单的显示，几乎不应用CSS样式：

Thymeleaf迭代器需要放在tably主体的

标记中，而不是单元格标记中

HTML表必须同时定义

和

节，DataTables才能使用它

DataTables选项包括：

“dom”：“tp”

-仅显示表（

）和分页（

）控件

“排序”：false

-禁用列排序

“pagingType”：“simple”

-仅显示“previous”和“next”按钮

“lengthmenus”：[1]

-强制数据表一次只显示一行

$(document).ready( function () {
    $('#table_id').DataTable();
} );

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Demo</title>
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
        <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

        <style>
            .dataTables_paginate {
                float: left !important;
            }
        </style>
    </head>

    <body>

        <div style="margin: 20px; width: 150px;">
            <table id="table_id">
                <thead>
                    <tr>
                        <td>Users</td>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="info : ${userInfo}">
                        <td>
                            <p th:text=${info.name}></p>
                            <p th:text=${info.dob}></p>                                     
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#table_id').DataTable({
                    "dom": "tp",
                    "ordering": false,
                    "pagingType": "simple",
                    "lengthMenu": [ 1 ]
                });
            });
        </script>

    </body>
</html>