[블로그 만들기] 페이징 처리하기 (JPA Pagination

블로그의 메인 페이지에서 게시글 리스트를 보여주도록 했는데, 게시글이 몇개 이상 넘어가면 페이지를 넘겨 볼 수 있도록 코드를 추가해줍니다.

 

메인 페이지가 매핑 될때 페이지를 파라미터로 받아와줍니다.

만약 페이지가 없다면 0으로 설정해주고 model에 올려줄 게시글들을 한 페이지에 게시글이 4개가 되도록 해서 받아와줍니다.

원래대로라면 SELECT 문으로 쿼리문을 게시글 수 만큼 특정해서 짜 주고 동적으로 바뀌도록 해주어야 하는데, 

spring에서는 PageRequest가 해줍니다.

page 파라미터를 Integer로 받는 이유는 Integer로 받았을 때 null인지 아닌지 확인 가능하기 때문입니다. null이라면 page를 0으로 설정해주고 처음 화면을 보여주면 되기 때문에 더 편리합니다.

 

이렇게 해서 작동 시키면 메인 페이지에 게시글이 안나올 텐데, 이유는 postEntity의 content에 게시글 정보가 들어있기 때문입니다.

 

page의 속성들을 확인하고 싶으시다면 @RestController로 Pageable을 파라미터로 받아 postRepoitory.findall(pageable);을 return 해보면 상세 속성들을 볼 수 있습니다.

 

따라서 forEach 문의 items를 postsEntity.content로 해줍니다.

 

페이지를 넘길 버튼을 추가해 줍니다.

간단하게 bootstrap의 pagination을 사용해주겠습니다.

https://www.w3schools.com/bootstrap4/bootstrap_pagination.asp

Bootstrap 4 Pagination

 

위의 코드를 긁어와 코드에 추가시켜줍니다.

 

Previous와 Next 버튼을 제외한 <li> 태그는 지워줍니다.

Previous 버튼을 클릭하면 postsEntity.number가 -1이 되어 이전 페이지로 넘어가지도록, 

Next 버튼을 클릭하면 postsEntity.number가 +1이 되어 다음 페이지로 넘어가도록 설정해줍니다.

postsEntity의 number가 해당 페이지라고 생각하시면 됩니다.

 

이렇게 하고 서버를 실행시켜주면 다음 페이지에 게시글이 없음에도 불구하고 다음 페이지로 넘어가고, 첫번째 페이지에서 Previous 버튼이 활성화되어 있어 버튼을 누르면 에러가 나타납니다.

 

 

따라서 적절한 처리를 해줍니다.

 

각 경우의 수에 따라 버튼 활성화/비활성화를 처리해줍니다.

 

전체 페이지가 하나 일 경우 Previous, Next 버튼 모두 비활성화

 

전체 페이지가 여러 페이지이면서 첫번 째 페이지일 경우 Previous 버튼 비활성화, Next 버튼 활성화

 

전체 페이지가 여러 페이지이면서 마지막 페이지일 경우 Previous 버튼 활성화, Next 버튼 비활성화

 

전체 페이지가 여러 페이지이면서 첫번째 페이지도 마지막 페이지도 아닐 경우 Previous, Next 버튼 모두 활성화

 

이렇게 Pagination 처리를 끝냈습니다.