게시판 페이징 처리

친친·2022년 10월 24일
0
post-thumbnail

페이징이란?

게시판에 존재하는 수많은 게시글들을 페이지로 나눠서 효과적으로 정보를 제공하는 것을 뜻한다. JPA에서는 Pagealbe이란 인터페이스를 제공하여 보다 편리하게 페이징 처리를 돕는다.

현재 boardlist뷰는 한 페이지에 모든 게시글들을 보여주고 있어 보기에 불편하다.
이를 다음과 같이 페이징 처리한다

  • 한 페이지에 10개 게시글만 담는다
  • 가장 최신의 게시물이 상단에 올라오도록 내림차순으로 정렬한다
  • 하단에 페이징 블럭을 만들어서 페이지 번호들을 나열한다

//boardService.java
...
    //게시글 리스트 처리
    //매개변수에 pageable 넣어주면서 반환형도 Page로 변경한다
    public Page<Board> boardList(Pageable pageable){
    
        return boardRepository.findAll(pageable);
    }

boardService의 findAll() 메서드에 pageable 인수를 추가해주고, Page형으로 return 받을 수 있게 반환형도 수정해준다.


//boardController.java
...
    @GetMapping("/board/list")
    public String boardList(Model model,
                          /*@PageableDefault를 이용해 시작 페이지, 페이지 크기, 
                            정렬기준,정렬방식 등을 지정한다.*/
                           @PageableDefault(page = 0, 
                            size = 10, sort="id", 
                            direction = Sort.Direction.DESC)Pageable pageable{

        Page<Board> list = boardService.boardList(pageable);
  		
        //페이징 블럭을 만들기 위한 변수 선언
        //Page에서 시작페이지는 0부터 시작하므로 1을 더해준다
        int nowPage = list.getPageable().getPageNumber() + 1; 
        int startPage =Math.max(nowPage -4, 1);
        int endPage = Math.min(nowPage + 5, list.getTotalPages());

        model.addAttribute("list", list);
        model.addAttribute("nowPage", nowPage);
        model.addAttribute("startPage", startPage);
        model.addAttribute("endPage", endPage);

        return "boardlist";
    }

Controller에서 boardList()메서드에 매개변수로 Pageable을 추가하면서 @PageableDefault를 이용해서 페이지 크기, 정렬기준, 정렬방식을 지정한다. 그리고 페이징 블럭을 만들기 위한 변수들을 선언하고 Model을 통해 뷰로 전달한다.


//boardlist.html
...
	  </table>
      <th:block th:each="page : ${#numbers.sequence(startPage, endPage)}">
            <a th:if="${page != nowPage}" th:href="@{/board/list(page = ${page -1})}" 
               th:text="${page}">
        	</a>
            <strong th:if="${page == nowPage}" th:text="${page}" style="color: orangered">
        	</strong>
      </th:block>
...

boardlist.html 뷰에서 table 태그 아래에
위와 같이 페이징 블럭을 구현하는 코드를 추가한다.

Thymeleaf 문법

th:text -> 태그 안에 text를 출력
th:each -> 반복문
th:block -> 블럭 안의 서브 태그들을 반복
th:each="변수 : ${list}" -> for each문
th:if="조건" -> 조건문
th:href="@{ 링크 위치 }" -> 해당 링크로 이동
#numbers.sequest(start, end) -> 숫자 start~ end 까지 반영
Thymeleaf Number Format 더 알아보기




[출처] 한코딩

profile
웹개발 블로그

0개의 댓글