How To Use Datatable In Thymeleaf?
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
Solution 1:
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><htmlxmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8"><title>Demo</title><scriptsrc="https://code.jquery.com/jquery-3.5.1.js"></script><scriptsrc="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script><linkrel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"><linkrel="stylesheet"type="text/css"href="https://datatables.net/media/css/site-examples.css"><style>.dataTables_paginate {
float: left !important;
}
</style></head><body><divstyle="margin: 20px; width: 150px;"><tableid="table_id"><thead><tr><td>Users</td></tr></thead><tbody><trth:each="info : ${userInfo}"><td><pth:text=${info.name}></p><pth:text=${info.dob}></p></td></tr></tbody></table></div><scripttype="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
Post a Comment for "How To Use Datatable In Thymeleaf?"