타임리프(Thymeleaf) 이중 반복

타임리프를 이용하여 테이블을 생성할때 컬럼을 생성하며, 데이터도 포함 하는 방법입니다.

dataList 를 반복하며 레코드를 생성하고, columnList를 반복하며 컬럼을 생성하고 데이터를 세팅합니다.

 

컬럼명을 변수로 처리하는 방식:

th:text="${data.__${column}__}"

 

컬럼명이 한글이나 특수문자 있는 경우:

th:text="${data.get('__${column}__')}"

 

Controller 파일

		List<HashMap<String, String>> dataList = new ArrayList<HashMap<String, String>>();
		
		HashMap<String, String> map = new HashMap<String, String>();
		
		map.put("COL1", "AAAA");
		map.put("COL2", "BBBB");
		map.put("COL3", "CCCC");
		map.put("COL4", "DDDD");
		map.put("COL5", "EEEE");
		dataList.add(map);
		
		map = new HashMap<String, String>();
		map.put("COL1", "FFFF");
		map.put("COL2", "GGGG");
		map.put("COL3", "HHHH");
		map.put("COL4", "IIII");
		map.put("COL5", "JJJJ");
		dataList.add(map);

		map = new HashMap<String, String>();
		map.put("COL1", "KKKK");
		map.put("COL2", "LLLL");
		map.put("COL3", "MMMM");
		map.put("COL4", "OOOO");
		map.put("COL5", "PPPP");
		dataList.add(map);

		ArrayList<String> columns = new ArrayList<String>();
		
		columns.add("COL1");
		columns.add("COL2");
		columns.add("COL3");
		columns.add("COL4");
		columns.add("COL5");
		
		mv.addObject("dataList", dataList);
		mv.addObject("columnList", columns);

 

Html 파일

<table class="table table-bordered table-sm" id="table2" data-search="true" data-show-columns-toggle-all="true"
	data-export-data-type="all" data-single-select="true" data-click-to-select="true" data-minimum-count-columns="2"
	data-show-pagination-switch="false" data-pagination="true" data-id-field="id"
	data-page-list="[10, 20, 25, 50, 100, all]" data-show-jump-to="true" data-show-footer="false" data-toggle="table"
	data-url="/prediction/predictionItemList.ajax" data-query-params="queryParams">
	<thead>
		<tr th:each="data : ${dataList}">
			<th th:each="column : ${columnList}" th:data-field="${column}" th:text="${data.__${column}__}" data-sortable="true" data-align="center"></th>
		</tr>
	</thead>
</table>

 

결과

<table class="table table-bordered table-sm" id="table2" data-search="true" data-show-columns-toggle-all="true"
	data-export-data-type="all" data-single-select="true" data-click-to-select="true" data-minimum-count-columns="2"
	data-show-pagination-switch="false" data-pagination="true" data-id-field="id"
	data-page-list="[10, 20, 25, 50, 100, all]" data-show-jump-to="true" data-show-footer="false" data-toggle="table"
	data-url="/prediction/predictionItemList.ajax" data-query-params="queryParams">
	<thead>
		<tr>
			<th data-field="TEST1" data-sortable="true" data-align="center">AAAA</th>
			<th data-field="TEST2" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST3" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST4" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
		</tr>
		<tr>
			<th data-field="TEST1" data-sortable="true" data-align="center">AAAA</th>
			<th data-field="TEST2" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST3" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST4" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
			<th data-field="TEST5" data-sortable="true" data-align="center">BBBB</th>
		</tr>
	</thead>
</table>