[게시판 만들기 (9)] 게시글 페이징_페이징 후 상세조회

 

BoardController의 findById 메서드에 페이징 코드를 추가한다.

 

[ BoardController ]

@GetMapping("/{id}")
public String findById(@PathVariable Long id, Model model,
                       @PageableDefault(page=1) Pageable pageable){
    /*
        해당 게시글의 조회수를 하나 올리고
        게시글 데이터를 가져와서 detail.html에 출력
     */
    boardService.updateHits(id);
    BoardDTO boardDTO = boardService.findById(id);
    model.addAttribute("board", boardDTO);
    model.addAttribute("page", pageable.getPageNumber());
    return "detail";
}

 

@PageableDefault(page=1) Pageable pageable

page라는 이름의 기본값이 1인 페이지 매개변수를 사용하여 페이지 정보를 받는다.

이 매개변수는 페이지 이동 후 돌아올 페이지 번호를 나타낸다.

 

model.addAttribute("page", pageable.getPageNumber());

page라는 이름으로 현재 페이지 번호를 모델에 추가하여 뷰로 전달한다.

 

 

 

 

 

 

 

 

detail.html 에  listReq 목록 함수를 추가한다.

 

<button onclick="listReq()">목록</button>
<button onclick="updateReq()">수정</button>
<button onclick="deleteReq()">삭제</button>

</body>
<script th:inline="javascript">
    const listReq = () => {
        console.log("목록 요청");
        const page = [[${page}]];
        location.href = "/board/paging?page="+page;
    }
    const updateReq = () => {
        console.log("수정 요청");
        const id = [[${board.id}]];
        location.href = "/board/update/" + id;
    }
    const deleteReq = () => {
        console.log("삭제 요청");
        const id = [[${board.id}]];
        location.href = "/board/delete/" + id;
    }
</script>

 

const page = [[${page}]];

서버 측에서 동적으로 생성된 page 값을 가져와서 클라이언트측의 자바스크립트 변수 page에 할당한다.

이 값은 현재 페이지 번호를 나타내며, 페이지 이동 시 함께 전달될 것이다.

 

location.href = "/board/paging?page="+page;

현재 페이지 번호인 page 변수의 값이 추가된다. 

 

 

 

 

 

 

 

 

 

 

 

실행 고

 

 

http://localhost:8092/board/paging?page=2

id 6번 클릭

 

 

 

 

목록 클릭

 

 

 

 

현재 페이지로 돌아왔다.