SpringからAjaxにListを送ってHTML(thymeleaf)にtableで表示したい

前提・実現したいこと

SpringからAjaxにList型の値を送って、それをHTML(thymeleaf)上にtableで表示したいのですが、
どうもやり方がよく分かりません

該当のソースコード

javascript
1/**
2 * 基本給登録ページ
3 */
4function monthsSelect(obj){
5	var objVar = obj.value;
6	$.ajax({
7    	type : "GET",
8        url : "baseSalaryMonth",
9        data: {
10        	baseSalaryMonthStr: objVar
11        	},
12        dataType : "json"
13    })
14    .then(
15    		function (data) {
16    			//通信成功
17    			alert("読み込み成功");
18    			$('#baseSalaryList').val(data);
19    		},
20    		function () {
21    			//通信失敗
22    			alert("読み込み失敗");
23    		});
24}
25}

java
1	@RequestMapping(value = "/baseSalaryMonth" , method = RequestMethod.GET)
2    @ResponseBody
3    public List<BaseSalary> baseSalarySelectMonth(String baseSalaryMonthStr, ModelAndView mav)throws JsonParseException, JsonMappingException, IOException{
4		System.out.println(baseSalaryMonthStr);
5		int aseSalaryMonth = Integer.parseInt(baseSalaryMonthStr);
6		List<BaseSalary> baseSalaryList = baseSalaryService.baseSalary(aseSalaryMonth);
7		return baseSalaryList;
8	}

html
1<!DOCTYPE html>
2<html lang="ja" xmlns:th="http://www.thymeleaf.org"
3	xmlns:sec="http://www.thymeleaf.org/extras/spring-security4">
4<head>
5<meta charset="UTF-8">
6<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
7<script src="/js/sampleJs.js" th:src="@{/js/baseSalary.js}"></script>
8</head>
9<body>
10	<table>
11		<tr><th>カラム1</th><th>カラム2</th><th>カラム3</th></tr>
12		<tr th:each="obj : ${baseSalaryList}">
13			<td th:text="${obj.userId}"></td>
14			<td th:text="${obj.fullNm}"></td>
15			<td th:text="${obj.baseSalary}"></td>
16		</tr>
17	</table>
18</body>
19</html>

Ajaxからhtmlにlist型の値を渡して、
<table>
<tr><th>カラム1</th><th>カラム2</th><th>カラム3</th></tr>
<tr th:each="obj : ${baseSalaryList}">
<td th:text="${obj.userId}"></td>
<td th:text="${obj.fullNm}"></td>
<td th:text="${obj.baseSalary}"></td>
</tr>
</table>
こういう感じでtableは作れないものでしょうか
ご教授お願いいたします。

補足情報（FW/ツールのバージョンなど）

java8
SpringBoot2.0
jquery1.9.1

行動規範の内容に同意します

回答2件

アプローチの方法を変えた方が良いかと思います。テーブルの内容を表示したいHTMLからjQueryのload関数を使えば、特定の要素を非同期に切り替えが可能です。

html
1<div>
2テーブル出力
3<div id="target">
4</div>
5</div>
6
7<input type="button" id="display" class="btn btn-success" value="テーブル表示">
8
9<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
10<script>
11$('#display').on('click' ,function() {
12	$('#target').load("tableDisplay #table");
13});
14</script>

このような表示元となるHTMLに、jQueryのload関数を使って、tableDisplayの #table 要素の中身だけを入れ替えます。適宜パラメータや送信したいデータを追加してください。

これに対して受け取るController側は単純にThymeleafの結果を返すだけです。

java
1import java.util.ArrayList;
2import java.util.List;
3
4import org.springframework.stereotype.Controller;
5import org.springframework.web.bind.annotation.GetMapping;
6import org.springframework.web.servlet.ModelAndView;
7
8import com.github.apz.springsample.model.Result;
9
10@Controller
11public class TableController {
12
13	@GetMapping("/table")
14	public String display() {
15		return "table";
16	}
17
18	@GetMapping("/tableDisplay")
19	public ModelAndView table(ModelAndView mnv) {
20
21		List<Result> results = new ArrayList<Result>() {{
22			add(Result.builder().number(1).name("abc").build());
23			add(Result.builder().number(2).name("ddd").build());
24			add(Result.builder().number(3).name("eee").build());
25			add(Result.builder().number(4).name("fff").build());
26			add(Result.builder().number(5).name("xyz").build());
27		}};
28
29		mnv.addObject("results", results);
30		mnv.setViewName("tableDisplay");
31
32		return mnv;
33	}
34}

tableDisplayで表示されるHTMLテンプレートは、例えば以下のようなものです。

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<meta charset="UTF-8" />
5</head>
6
7<body>
8<table id="table" class="table table-bordered">
9<thead>
10	<tr>
11		<th>number</th>
12		<th>name</th>
13	</tr>
14	<tr th:each="result : ${results}">
15		<td>[[${result.number}]]</td>
16		<td>[[${result.name}]]</td>
17	</tr>
18</thead>
19
20</table>
21</body>
22</html>