如何在Thymeleaf中使用DataTable? [英] How to use DataTable in Thymeleaf?
问题描述
如何在百里香中使用数据表.我创建了一个表，其中为userInfo列表中存在的所有用户在td内创建了div
我怎样才能仅将一个用户记录显示为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>
在js中，我只是写了这个
$(document).ready( function () {
$('#table_id').DataTable();
} );
以下示例显示了一种方法，您可以使用Thymeleaf填充表，然后使用DataTables一次显示一行(使用"previous" ；和下一步"按钮):
<!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>
这将创建一个非常简单的显示，几乎没有应用CSS样式:
Thymeleaf迭代器需要放置在表格主体的<tr>标签中，而不是单元格标签中.
HTML表必须同时定义<thead>和<tbody>部分，以便DataTables能够使用它.
DataTables选项为:
"dom": "tp"-仅显示表格(t)和分页(p)控件.
"ordering": false-禁用列排序.
"pagingType": "simple"-仅显示上一个"和下一个"按钮.
"lengthMenu": [ 1 ]-强制DataTables一次仅显示一行
How to use datatable in thymeleaf. i have created a table in which i am creating a div inside of td for all the user present in userInfo list
How can i show only one user record as a div and inside of pagination section display only next and previous buttons.
Currently i am getting error jquery.min.js:2 Uncaught TypeError: Cannot read property 'mData' of undefined
I found some answer related to it as dataTables requires a well formed table. It must contain and . But i just want to display one div and hide other div when next button is clicked new div should be visible and hide the previous one
<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>
In js i just have written this
$(document).ready( function () {
$('#table_id').DataTable();
} );
The following example shows one way in which you can use Thymeleaf to populate a table, and then use DataTables to display one row at a time (with "previous" and "next" buttons):
<!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>
This creates a very simple display like this, with almost no CSS styling applied:
The Thymeleaf iterator needs to be placed in the tably body's <tr> tag, not in a cell tag.
The HTML table must be defined with both a <thead> and a <tbody> section, for DataTables to be able to use it.
The DataTables options are:
"dom": "tp" - displays only the table (t) and the pagination (p) controls.
"ordering": false - disables column ordering.
"pagingType": "simple" - shows only the "previous" and "next" buttons.
"lengthMenu": [ 1 ] - forces DataTables to show only one row at a time
这篇关于如何在Thymeleaf中使用DataTable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
