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();
} );
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();
} );
1 Answer
Reset to default 6The 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">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery./jquery-3.5.1.js"></script>
<script src="https://cdn.datatables/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables/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