i build crm system,
i had object hes name users he hold also the data from details table (one to many realation)
lets says i had nested object name user and he had more than 1 object of details
i want to get this in the end in thymeleaf table
name | entry date
david | 5/6/22
david | 1/7/22
but i got
name | entry date
david | 5/6/22 , 1/7/22
this is table code on thymeleaf:
<table class="table w-75 table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col" class="text-center">First name</th>
<th scope="col" class="text-center">Entry Date</th>
</tr>
</thead>
<tbody>
<tr th:each="users : ${ParkingUsers}">
<td class="text-center" th:text="${users.firstName}" />
<td class="text-center" th:each="date, i: ${users.parkingDetails}"
th:text="${(i.index > 0 ? '' : '') + date.entryDate}" />
</tr>
</tbody>
</table>
how can i fix that?
thanks
This is a good candidate for using the Thymeleaf th:block tag.
You can place the outer loop (for users) in this tag, and then place the inner loop (for parking details) in the <tr> tag.
Example:
Assume we have two classes:
public class User {
private String firstName;
private List<ParkingDetail> parkingDetails;
// getters and setters
}
And:
public class ParkingDetail {
private LocalDate entryDate;
// getters and setters
}
And assume we have a list of users: List<User>.
We can use the following in our Thymeleaf template:
<table class="table w-75 table-striped table-dark table-hover">
<thead>
<tr>
<th>First name</th>
<th>Entry Date</th>
</tr>
</thead>
<tbody>
<th:block th:each="user : ${users}">
<tr th:each="parkingDetail : ${user.parkingDetails}">
<td th:text="${user.firstName}"></td>
<td th:text="${parkingDetail.entryDate}"></td>
</tr>
</th:block>
</tbody>
</table>
This will generate the following HTML:
<table>
<thead>
<tr>
<th>First name</th>
<th>Entry Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>david</td>
<td>2022-06-05</td>
</tr>
<tr>
<td>david</td>
<td>2022-07-01</td>
</tr>
</tbody>
</table>
The th:block tag allowed Thymeleaf to iterate over the list of users, but it did not cause any HTML to be generated. The Thymeleaf ${user} variable created in the th:block tag can be referenced in all the child tags inside the th:block.
There are various other examples of how th:block can be used, in other questions on this site - so if this does not meet your needs, you can research those other questions.
Related
I ask if anyone can help me, I import an excel table and create several rows of data with a column with the same reference, I want to update a field with a single input of all the rows with the 'Same' reference, for example I want to change the value of the same column with a single input and update the data to all, or add if it does not exist
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Same</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>255</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>255</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>255</td>
</tr>
</tbody>
</table>
I am new to Thymeleaf and trying to create a dynamic table on Themeleaf template.
How can I do it..??
I have been googling by I didn't got any proper answer. The issue is I cannot iterate List< Map< String,Object >>. I can have any number of columns and columns name could be any thing.
<tr class="headings">
<th class="column-title">ID</th>
<th class="column-title">Name</th>
<th class="column-title">Salary</th>
<th class="column-title">Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row:${rows}" id = "tablerow">
<td class=" " th:text="${row.getId()}">Id</td>
<td class=" " th:text="${row.getName()}">Name</td>
<td class=" " th:utext="${row.getSalary()}">Salary</td>
<td class=" " th:text="${row.getStatus()}">Active</td>
</tr>
</tbody>
I need to set values dynamically since if query of result will keep changing . right now column name are hard coded and value are also getting by row.getId what if there is no Id, it could be anything in rows what shall I use than..? example row.<>.
rows is obtained as List< Map< String, Object>>.
Thanks in advance.
You can iterative over a Map just as easily as you can a List. The simplest form of this would be:
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="field: ${row}" th:text="${field.value}" />
</tr>
</tbody>
However, since Maps don't have a specific ordering (unless you're using something like a TreeMap), the way I would do it would be something like this (complete example should match your example table):
Controller
List<String> headers = Arrays.asList("ID", "Name", "Salary", "Status");
List<Map<String, Object>> rows = new ArrayList<>();
rows.add(Map.of("ID", "1", "Name", "Jim", "Salary", "50000", "Status", "active"));
rows.add(Map.of("ID", "2", "Name", "Sally", "Salary", "50000", "Status", "inactive"));
Template
<table>
<thead>
<tr class="headings">
<th th:each="header: ${headers}" class="column-title" th:text="${header}" />
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="header: ${headers}" th:text="${row.get(header)}" />
</tr>
</tbody>
</table>
Which will produce:
<table>
<thead>
<tr class="headings">
<th class="column-title" >ID</th>
<th class="column-title" >Name</th>
<th class="column-title" >Salary</th>
<th class="column-title" >Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" id="tablerow">
<td >1</td>
<td >Jim</td>
<td >50000</td>
<td >active</td>
</tr>
<tr class="even pointer" id="tablerow">
<td >2</td>
<td >Sally</td>
<td >50000</td>
<td >inactive</td>
</tr>
</tbody>
</table>
I am trying to Iterate through a list which contains a list of objects, i.e. List I am wondered why this is not working, tried with simply "i", but no luck.
List<Object[]> lists; // logic
model.addObject("lists", lists);
model.addObject("table_width", lists.get(0).length);
Thymeleaf Code Snippet
<table class="table table-responsive table-stripped table-collapsed table-bordered">
<tr th:each="rows,rowStat : ${lists}">
<td th:text="${rowStat.count}"></td>
<td th:each="i : ${#numbers.sequence(0, table_width)}" th:text="${rows[${i}]}"></td>
</tr>
</table>
I have found a way,
<td th:each="i : ${#numbers.sequence(0, table_width-1)}" th:text="${rows[__${i}__]}"></td>
This does the tricks
You can simply iterator over both lists. No need to use the #numbers helper.
<table class="table table-responsive table-stripped table-collapsed table-bordered">
<tr th:each="rows, rowStat : ${lists}">
<td th:text="${rowStat.count}"></td>
<td th:each="value: ${rows}" th:text="${value}"></td>
</tr>
</table>
If you are iterating a collection(list) of objects, try below example:
HTML:
<div th:if="${not #lists.isEmpty(counts)}">
<h2>Counts List</h2>
<table class="table table-striped">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr th:each="count : ${counts}">
<td th:text="${count.id}"></td>
<td th:text="${count.name}"></td>
</tr>
</table>
</div>
Java:
public List<Count> listAll() {
List<Count> counts = new ArrayList<>();
countRepository.findAll().forEach(counts::add);
return counts;
}
Read more info in Thymeleaf Documentation - Iteration Basics section.
I'm a beginner in spring boot so please pardon my ignorance.
I have this table:
<table class="table table-bordered" width="100%" id="dataTable" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>Service code</th>
<th>description</th>
<th>answer</th>
<th>Update</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="appel : ${list}">
<td th:text="${appel.id}"></td>
<td th:text="${appel.serviceCode}"></td>
<td th:text="${appel.description}"></td>
<td th:text="${appel.answer}"></td>
<td><button data-toggle="modal" data-target="#myModalHorizontal" class="btn1">Edit</button></td>
<td><a th:href="#{/appel/delete/{id}(id=${appel.id})}">Delete</a></td>
</tr>
</tbody>
</table>
this table is filled with data from database expet for the column "answer" it's always empty
when I click the button "edit" this form appear to fill the column "answer" and save it in the table "service" that have the appropriate id
I'm working with spring boot and I didn't know how to insert the answer to database in the row with the same id please any ideas?
I have the following code below. Thymeleaf is unable to resolve "orderDetails" despite the field being existent/not null when i debug through the internals of Thymeleaf.
Exception= Field or property 'orderDetails' cannot be found on object of type
<div th:each="order : ${orders}">
<table>
<tr>
<th>CUSTOMER</th>
<th>PRICE</th>
<th>TIME ORDER PLACED</th>
<th>ITEMS</th>
</tr>
<tr>
<td th:text="${order.customerAccount.email}">email</td>
<td th:text="${order.baseCost}">2.50</td>
<td th:text="${order.tip}">2.00</td>
<td th:text="${order.orderDetails}">2.00</td>
<!-- <td th:text="${#lists.size(order.orderDetails)}">1</td> -->
</tr>
</table>
<table>
<tr>
<th>DRINK NAME</th>
<th>AMOUNT</th>
<th>QUANTITY</th>
<th>COST</th>
</tr>
<tr th:each="orderDetail : ${order.orderDetails}">
<td th:text="${orderDetail.barStock.drink.name}">Test Drink Name</td>
<td th:text="${orderDetail.barStock.amount}">10oz</td>
<td th:text="${orderDetail.quantity}">2</td>
<td th:text="${orderDetail.barStock.cost * orderDetail.quantity}">2.00</td>
</tr>
</table>
Here is the field in question of the "order" field/class.
#OneToMany(fetch = FetchType.EAGER, mappedBy = "barOrder")
#JsonProperty
private Set<OrderDetail> orderDetails;
A public getter method for orderDetails field is needed to allow Thymeleaf to access it.
public Set<OrderDetail> getOrderDetails() {
return orderDetails;
}