如何在Thymeleaf中使用DataTable？

Question

如何在Thymeleaf中使用DataTable？

PUR*_*URU 5 html javascript jquery datatables thymeleaf

如何在 thymeleaf 中使用数据表。我创建了一个表，在其中为列表中存在的所有用户创建一个div内部tduserInfo

我怎样才能只显示一个用户记录作为一个div，并且分页部分的内部只显示下一个和上一个按钮。

目前我收到错误jquery.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined

我找到了一些与之相关的答案，因为数据表需要一个格式良好的表。它必须包含和。但我只想在单击下一个按钮时显示一个 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>

Run Code Online (Sandbox Code Playgroud)

在js中我刚刚写了这个

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

and*_*mes 6

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

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

Run Code Online (Sandbox Code Playgroud)

这将创建一个非常简单的显示，如下所示，几乎没有应用 CSS 样式：

Thymeleaf 迭代器需要放置在表格主体的<tr>标签中，而不是单元格标签中。

HTML 表必须同时定义为 a<thead>和 a<tbody>部分，DataTables 才能使用它。

数据表选项有：

"dom": "tp"- 仅显示表格 ( t) 和分页 ( p) 控件。

"ordering": false- 禁用列排序。

"pagingType": "simple"- 仅显示“上一个”和“下一个”按钮。

"lengthMenu": [ 1 ]- 强制数据表一次只显示一行

归档时间：	4 年，10 月前
查看次数：	3825 次
最近记录：	4 年，10 月前