私はこれを持っています:
@GetMapping("/records")
public String getRecords(Model model) {
model.addAttribute("tallies", getAllTallies(null));
model.addAttribute("categories", getCategories());
return "records";
}
getCategories()
単にCategory
sのリストをgetAllTallies
返し、単にすべてTally
のsのリストを返します。
要求されたパラメータcategory
がnullの場合、カテゴリに関係なく、すべての集計が返されます。ただし、nullでない場合tallies
は、指定されcategory
たからのみすべてを返します。
これはgetAllTallies
:
@GetMapping("/tallies")
@ResponseBody
public List<Tally> getAllTallies(@RequestParam(required = false) String category)
そして私の中でrecords.html
:
<body>
<div>
<select class="form-control" >
<option value="0">Select Category</option>
<option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.category}"></option>
</select>
</div>
<table cellpadding="10" border="1px">
<thead>
<tr>
<th> Nominee </th>
<th> Category </th>
<th> Tally </th>
</tr>
</thead>
<tbody>
<tr th:if="${tallies.empty}">
<td colspan="3"> No Books Available </td>
</tr>
<tr th:each="tally : ${tallies}">
<td><span th:text="${tally.nominee}"> Nominee </span></td>
<td><span th:text="${tally.category}"> Category </span></td>
<td><span th:text="${tally.count}"> Tally </span></td>
</tr>
</tbody>
</table>
</body>
私がやろうとしているのは、ドロップダウンリスト(カテゴリ)から新しい値を選択するたびに、カテゴリに基づいてテーブルも変更されることです。これがjqueryやjsなしで、htmlだけで可能かどうかを考えていました。しかし、ドロップダウンリストを介してテーブルを動的に更新する方法を理解するのに苦労しています。
いいえ、なしでこれを達成する方法はありませんjs
かjQuery
。事は、Thymeleaf
サーバー側で動作します。したがって、一度レンダリングされると、ページを更新するか、を使用してサーバーからの応答を要求しない限り、再度レンダリングされることはありませんajax
。あなたの場合、単純なものでajax
うまくいくでしょう。
HTML
<body>
<div>
<select id="categories" class="form-control" >
<option value="0">Select Category</option>
<option th:each="category : ${categories}" th:value="${category.id}" th:text="${category.category}"></option>
</select>
</div>
<table cellpadding="10" border="1px">
<thead>
<tr>
<th> Nominee </th>
<th> Category </th>
<th> Tally </th>
</tr>
</thead>
<tbody id="tallies">
<tr th:if="${tallies.empty}">
<td colspan="3"> No Books Available </td>
</tr>
<tr th:each="tally : ${tallies}">
<td><span th:text="${tally.nominee}"> Nominee </span></td>
<td><span th:text="${tally.category}"> Category </span></td>
<td><span th:text="${tally.count}"> Tally </span></td>
</tr>
</tbody>
</table>
</body>
カテゴリのselectとにIDを追加しましたtbody
。
コントローラ
@GetMapping("/tallies")
@ResponseBody
public List<Tally> getAllTallies(@RequestParam(value = "category", required = false) String category)
パラメータに名前を追加しました。
jQuery
$('#categories').on('change', function() {
$.ajax({
url: '/tallies',
type: 'GET',
data: {
category: $(this).val();
},
success: function(tallies) {
// First, let's crear our tbody.
$('#tallies').empty();
// Now, let's go through each one of the tallies.
$(tallies).each( function() {
// Here you should add your missing fields. I am just adding one as an example.
$('#tallies').append('<tr><td><span>' + this.nominee + '</span></td></tr>');
})
}
})
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加