티스토리 뷰
반응형
타임리프를 이용하여 테이블을 생성할때 컬럼을 생성하며, 데이터도 포함 하는 방법입니다.
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>
반응형
'프로그램' 카테고리의 다른 글
스프링부트에서 외부서버 호출(proxy) (0) | 2023.01.18 |
---|---|
torch 에서 GPU 인식 안될때 조치법 (0) | 2022.09.22 |
Ubuntu에서 Docker를 이용한 GPU 개발 환경 설정 (0) | 2020.09.29 |
스프링부트 소개 (0) | 2020.03.02 |
MySQL, Maria DB 백업 쉘 스크립트 (0) | 2020.03.02 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- 114,548
- Today
- 5
- Yesterday
- 89
링크
TAG
- thymeleaf
- 성산일출봉
- 한달살이
- Spring boot
- cuda
- 울프NCU
- 리치유클래시아
- DBBackup
- 타임리프
- Delta
- 광치기해변
- 환경설정
- GPU
- NCU
- 제주도한달살기
- 우도
- dual
- loop
- WolfNCU
- DB백업
- 울프프로그램
- 스프링부트
- 외부서버연동
- proxy
- 이중반복
- Kossel
- 오조리해변
- 우분투#한글
- 제주아쿠아플래닛
- torch