Thymelear: interactive series
I want to create rows with interactive tables in html + thymeleaf, but I have the following problem. AFAIK cannot wrap a tr element with a (a-tag) link, since the table can only directly contain tr-subtags. So I have to wrap the content of each td tag, but those values are dynamically generated by thymeleaf!
What would be the best approach to bind each line (bind each td tag of each line) to the generated url? Are there any text: prefix / suffix functions?
<tr th:each="item : ${itmes}">
<td th:text="${{item.name}}">some name</td>
<td th:text="${{item.date}}">01.03.2014</td>
<td>author</td>
<td>2</td>
<td>
<a th:href="@{/backend/items/{id}(id=${item.id})}" href="show.html"
role="button" class="btn btn-default btn-circle">
<i class="fa fa-info"></i>
</a>
<a th:href="@{/backend/items/{id}/update(id=${item.id})}" role="button" class="btn btn-warning btn-circle">
<i class="fa fa-edit"></i>
</a>
</td>
</tr>
source to share
The most problematic way to do this is using javascript to create every available line.
eg,
$("#yourtablename tr").click(function() {
//do more javascript code to meet your needs
});
Personally, I attach the href to one of the tds, then do something like below:
$("#yourtablename tr").click(function() {
window.location = $(this).find('td:eq(5)').attr("href");
});
Hope it helps
source to share
I had to solve a fairly similar issue with Tymeleaf and I also needed to pass the request parameter from the element to the url, so I solved it like this:
<tr th:each="item : ${itmes}" style="cursor: pointer"
th:onclick="'javascript:rowClicked(\'' + ${item.someField} + '\');'">
...
<td>Some data</td>
...
</tr>
then include a script somehow:
<script>
function rowClicked(value) {
location.href = "/myurl?param=" + value;
}
</script>
source to share