如何在 thymeleaf 中使用数据表。我创建了一个表，我正在其中创建一个 div内部 td对于所有在 userInfo 中的用户列表
如何仅将一个用户记录显示为 div 并且在分页部分内仅显示下一个和上一个按钮。
目前我收到错误 jquery.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined我发现了一些与它相关的答案，因为 dataTables 需要一个格式良好的表格。它必须包含 和 。但我只想在单击下一个按钮时显示一个 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>
$(document).ready( function () {
$('#table_id').DataTable();
} );
最佳答案
以下示例显示了一种使用 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>
Thymeleaf 迭代器需要放在表格主体的
<tr> 中标签，而不是在单元格标签中。HTML 表必须同时定义为
<thead>和一个 <tbody>部分，以便 DataTables 能够使用它。数据表选项是:
"dom": "tp" - 仅显示表格 ( t ) 和分页 ( p ) 控件。"ordering": false - 禁用列排序。"pagingType": "simple" - 仅显示“上一个”和“下一个”按钮。"lengthMenu": [ 1 ] - 强制数据表一次只显示一行
关于javascript - 如何在 Thymeleaf 中使用 DataTable？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65143110/