[22/01/24] 스프링부트 검색 페이징처리(2)

검색값 유지 + 검색 페이징처리

1. 검색값 유지

타입과 키워드 controller에서 model로 담기 ->
html에 값 담기

input에서 th:value="${keyword}" 사용

셀렉트-옵션에서 th:selected 사용
ex) th:selected="(${type}=='boardWriter')
가져온 타입이 boardWriter라면 boardWriter 옵션이 선택되어 담겨있음

<form class="row g-3 container text-center" style="margin-top: 100px;" action="/board/search" method="get">
    <div class="col-auto" >
        <select class="form-select" style="width:100px;height:40px; display:inline;" name="type">
            <option value="boardTitle" th:selected="(${type}=='boardTitle')">제목</option>
            <option value="boardWriter" th:selected="(${type}=='boardWriter')">작성자</option>
        </select>
    </div>

    <div class="col-auto">
        <input class="form-control"  type="text" name="keyword" th:value="${keyword}">
    </div>

    <div class="col-auto">
        <input class="form-control"  type="submit" value="검색">
    </div>
</form>

2. 검색 페이징 처리

검색 후 주소값은

http://localhost:8093/board/search?type=boardTitle&keyword=%EC%A0%9C%EB%AA%A9

이므로 페이지를 넘길때 search?type=boardTitle&keyword=%EC%A0%9C%EB%AA%A9 이 값을 같이 넘겨주도록 해야한다.

해결

페이징 href처리하는 곳에 주소값을 이렇게 추가한다.
(간단한 일이지만 코린이는 어려웠다ㅠㅠ)

th:href="@{/board/search(page=${boardList.totalPages},type=${type},keyword=${keyword})}"

<div class="container">
    <ul class="pagination">
        <li class="page-item">
            <!--첫 페이지로 가는 링크-->
            <a class="page-link" th:href="@{/board/search(page=1,type=${type},keyword=${keyword})}">
                <span>First</span>
            </a>
        </li>

        <li th:class="${boardList.first} ?  'page-item disabled'">
               <a class="page-link" th:href="${boardList.first} ? '#' : @{/board/search(page=${boardList.number},type=${type},keyword=${keyword})}">
                <span>&lt;</span>
            </a>
        </li>

        <!--startPage ~ endPage 까지 숫자를 만들어주는 역할-->
        <li th:each="page: ${#numbers.sequence(startPage, endPage)}"
            th:class="${page == boardList.number + 1} ? 'page-item active'">
            <a class="page-link" th:text="${page}" th:href="@{/board/search(page=${page},type=${type},keyword=${keyword})}"></a>
        </li>


        <li th:class="${boardList.last} ? 'disabled'">
            <a class="page-link" th:href="${boardList.last} ? '#' : @{/board/search(page=${boardList.number + 2},type=${type},keyword=${keyword})}">
                <span>&gt;</span> <!--삼항연산자 사용-->
            </a>
        </li>

        <li class="page-item">
            <a class="page-link" th:href="@{/board/search(page=${boardList.totalPages},type=${type},keyword=${keyword})}">
                <span>Last</span>
            </a>
        </li>
    </ul>
</div>