Spring Boot 8. JPA를 이용한 페이지 처리 및 검색

BootStarp version : 4.5.3

 

BootStrap에서 기본 페이징 nav를 가져온다.

<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link">Previous</a>
        </li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

 

BoardController

@GetMapping("/list")
    public String list(Model model, @PageableDefault(size = 2) Pageable pageable,
                       @RequestParam(required = false, defaultValue = "") String searchText){
        Page<Board> boards = boardRepository.findByTitleContainingOrContentContaining(searchText, searchText, pageable);

        int startPage = Math.max(1, boards.getPageable().getPageNumber() - 4);
        int endPage = Math.min(boards.getTotalPages(), boards.getPageable().getPageNumber() + 4);
        model.addAttribute("startPage", startPage);
        model.addAttribute("endPage", endPage);
        model.addAttribute("boards", boards);
        return "board/list";
    }

 

Pageable 인터페이스를 이용해 페이징을 String searchText로 검색을 구현한다.

JPA 문법을 이용해 title이 포함되어있거나 content가 포함되어 있는 경우 검색될 수 있도록 한다.

또 타임리프로 페이징 loop를 위해 startPage, endPage를 model에 저장한다.

 

BoardRepository

public interface BoardRepository extends JpaRepository<Board, Long> {
    List<Board> findByTitle(String title);
    List<Board> findByTitleOrContent(String title, String content);

    Page<Board> findByTitleContainingOrContentContaining(String title, String content, Pageable pageable);
}

 

list.html에서 총 건수 출력부분 수정

<div>총 건수 : <span th:text="${boards.totalElements}"></span></div>

원래는 boards.getTotalElements() 지만 타임리프 문법에 맞춰 수정

 

list.html

<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <li class="page-item" th:classappend="${1 == boards.pageable.pageNumber + 1} ? 'disabled'">
            <a class="page-link" href="#"
                th:href="@{/board/list(page=${boards.pageable.pageNumber - 1}, searchText=${param.searchText})}"
                tabindex="-1" aria-disabled="true">Previous</a>
        </li>
        <li class="page-item" th:classappend="${i == boards.pageable.pageNumber + 1} ? 'disabled'"
            th:each="i : ${#numbers.sequence(startPage, endPage)}">
            <a class="page-link" href="#"
                th:href="@{/board/list(page=${i - 1}, searchText=${param.searchText})}" th:text="${i}">1</a>
        </li>
        <li class="page-item"
            th:classappend="${boards.totalPages == boards.pageable.pageNumber + 1} ? 'disabled'">
            <a class="page-link" href="#"
                th:href="@{/board/list(page=${boards.pageable.pageNumber + 1}, searchText=${param.searchText})}">Next</a>
        </li>
    </ul>
</nav>

타임리프에서 startPage, endPage 루프 돌리기 (number loop)

sequence를 이용해서 첫번째값과 마지막 값을 지정하면 index가 1씩 증가하면서 마지막 값까지 값이 증가한다.

 

Previous(이전 버튼) : 현재 페이지 넘버가 1일 경우 disabled 상태가 되며 클릭 시 이전 페이지로 이동한다. (검색 파라미터도 같이 보내줘야 버튼을 눌렀을 때 검색 창이 초기화되지 않는다)

가운데 숫자 버튼 : classappend를 통해 i가 th:each에서 loop를 돌며 페이징 넘버를 구현한다.

Next(다음 버튼) : 마지막 페이지일 경우 disabled 상태가 되며 클릭 시 다음 페이지로 이동한다. (검색 파라미터도 같이 보내줘야 버튼을 눌렀을 때 검색 창이 초기화되지 않는다)

 

1페이지 일 때 Previous disabled

마지막 페이지일 때 Next disalbed

"hi" 검색 시 searchText=hi로 mapping되고 일치하는 데이터 검색