[Spring] Thymeleaf를 이용해 데이터 다루기

Controller에서 model 객체에 넣어둔 data 다루기

BaseController.java

@Slf4j
@RequiredArgsConstructor
@Controller
public class BaseController {

    private final BoardService boardService;

    @GetMapping("/")
    public String index(@PageableDefault(page = 0, size = 10, direction = Direction.DESC, sort = {"bno"}) Pageable pageable, Model model) {
        model.addAttribute("list", boardService.boardList(pageable));
        model.addAttribute("page", new PageDTO(boardService.boardList(pageable)));
        log.info(new PageDTO(boardService.boardList(pageable)).toString());
        return "index";
    }
	
    ...
}

 

model에 2가지를 넣었다. 

"list" 와 "page"

이제 화면에서 다뤄보자

Index.html

    <div class="row">
        <table class="table table-horizontal table-bordered">
            <thead class="thead-strong">
                <tr>
                    <th>글번호</th>
                    <th>제목</th>
                    <th>작성자</th>
                    <th>수정일</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr th:each="Board : ${list}">
                    <td th:text="${Board.bno}"></td>
                    <td><a th:href="@{/read(bno=${Board.bno})}" th:text="${Board.title}"></a></td>
                    <td th:text="${Board.writer}"></td>
                    <td th:text="${Board.modifiedDate}"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="row">
        <div class="col-sm-12 col-md-7">
            <div class="dataTables_paginate paging_simple_numbers" id="dataTable_paginate">
                <ul class="pagination">
                    <li th:class="${page.prev? 'paginate_button page-item previous':'paginate_button page-item previous disabled'}"
                        id="dataTable_previous"><a th:href="@{/(page=${page.currentPage-1})}" aria-controls="dataTable"
                            data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li>
                    <th:block th:each="num : ${#numbers.sequence(page.start,page.end)}">
                        <li th:class="${page.currentPage==num? 'paginate_button page-item active':'paginate_button page-item'}"><a th:href="@{/(page=${num})}" aria-controls="dataTable" data-dt-idx="1"tabindex="0" class="page-link" th:text="${num}"></a></li>
                    </th:block>
                        <li th:class="${page.next? 'paginate_button page-item next':'paginate_button page-item next disabled'}" id="dataTable_next"><a th:href="@{/(page=${page.currentPage+1})}" aria-controls="dataTable" data-dt-idx="7" tabindex="0" class="page-link">Next</a></li>
                </ul>
            </div>
        </div>
    </div>

단순하게 리스트를 순서대로 뽑는건 th:each를 통해 간단하게 해결했는데

th:href 속성주는 부분에서 좀 헤맸다.

th:class 부분에 현재 삼항연산을 사용했는데

이전엔 th:if 와 th:unless를 이행해서 처리했었다.

장담점이 있는것 같은데 삼항연산을 쓸때가 좀더 짧은듯 짧지 않은듯... 음 더 좋은듯?? 

부트 스트랩이라 class 명이 길어서 그렇지 class 명만 짧다면 삼항연산이 짧게 간결했을것이다.