페이징 처리 2편

Point

• 페이징은 프론트 단에서 번호를 눌러 페이지가 이동한다.
• 필요한 변수
  • nowPage → 현재 페이지
  • startPage → 블럭에서 보여줄 시작 페이지
  • endPage → 블럭에서 보여줄 마지막 페이지
• thymeleaf 문법
  • th:text → 태그 안에 데이터를 출력
  • th:each → 반복문
  • th:each=”${number:@number(시작번호, 끝번호)}”
    숫자를 이용한 반복문은 #numbers.sequence(시작 번호, 끝 번호)를 넣어줘야한다.

 

Controller 

• boardList() 수정한다. 
• .getPageable().getPageNumber() 현재페이지를 가져올 수 있다.
• nowPage,startPage,endPage를 프론트 쪽으로 넘겨준다.
• 출력은 thymeleaf로 출력하면된다.

@GetMapping("/board/list")
public String boardList(Model model, @PageableDefault(page = 0, size = 2,sort = "id",direction = Sort.Direction.DESC) Pageable pageable){

    Page<Board> list = null;

    int nowPage = list.getPageable().getPageNumber() + 1;
            // pageable의 시작은 0부터라 +1을 함.
    int startPage = Math.max(nowPage - 4, 1);
            // nowPage - 4 그냥 하면 현재페이지가 1일때 -4하면 -3이 되므로 max에 넣는다.
    int endPage = Math.min(nowPage + 5, list.getTotalPages());
            // min 넣은 이유도 위와 같다.
    model.addAttribute("list", list);
    model.addAttribute("nowPage", nowPage);
    model.addAttribute("startPage", startPage);
    model.addAttribute("endPage", endPage);


    return "boardList";
}

 

boardList.html

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