게시판 페이징하는 방법

1. 페이지 번호를 넣어 각각의 페이지에서 일정한 수의 게시글을 가져온다.
2. 현재 페이지의 페이지네이션 UI에서 disabled 클래스를 추가하여 비활성화 한다.

Controller

@GetMapping("/board")
 	public String home(Model model, int page) {
 		PageRequest pageRequest = PageRequest.of(page, 3, Sort.by(Direction.DESC, "id"));
 		Page<Board> boardsEntity = boardRepository.findAll(pageRequest);
 		int startPage = Math.max(1, boardsEntity.getPageable().getPageNumber() - 4);
 		int endPage = Math.min(boardsEntity.getTotalPages(), boardsEntity.getPageable().getPageNumber() + 4);
 		model.addAttribute("startPage", startPage);
 		model.addAttribute("endPage", endPage);
 		model.addAttribute("boardsEntity", boardsEntity);
 		return "board/list";
 	}

컨트롤러에서 게시글 리스트와 시작, 끝, 현재 페이지를 넘겨준다. 각각의 페이지에 게시글이 3개씩 로딩되게 만들고 id 순으로 내림차순 정렬한다.

html

// ...게시글 리스트 생략.... 

<ul class="pagination d-flex justify-content-center">

// 이전 페이지로 돌아가는 Prev 버튼
	<c:choose>
		<c:when test="${boardsEntity.first}">
			<li class="page-item disabled"><a class="page-link"
					href="/board?page=${boardsEntity.number - 1}">Prev</a></li>
		</c:when>
		<c:otherwise>
			<li class="page-item"><a class="page-link"
					href="/board?page=${boardsEntity.number - 1}">Prev</a></li>
		</c:otherwise>
	</c:choose>

// 각 페이지로 이동할 수 있는 페이지 번호
	<c:forEach begin="${startPage}" end="${endPage}" var="idx">
		<c:choose>
			<c:when test="${idx eq nowPage}">
				<li class="page-item disabled"><a
						class="page-link page-active" href="/board?page=${idx-1}">${idx}</a></li>
			</c:when>
			<c:otherwise>
				<li class="page-item"><a class="page-link"
						href="/board?page=${idx-1}">${idx}</a></li>
			</c:otherwise>
		</c:choose>
	</c:forEach>

// 다음 페이지로 이동하는 Next 버튼
	<c:choose>
		<c:when test="${boardsEntity.last}">
			<li class="page-item disabled"><a class="page-link"
					href="/board?page=${param.page + 1}">Next</a></li>
		</c:when>

		<c:otherwise>
			<li class="page-item"><a class="page-link"
					href="/board?page=${param.page + 1}">Next</a></li>
		</c:otherwise>
	</c:choose>
</ul>

이전 페이지로 돌아가는 Prev 버튼은 게시글의 첫번째 부분일 경우 disabled 클래스를 사용하여 버튼을 비활성화. 다음 페이지로 이동하는 Next 버튼은 게시글의 마지막 부분일 경우 disabled 클래스를 사용하여 버튼을 비활성화. 페이지 번호는 반복문을 사용하여 첫번째 페이지에서 마지막 페이지까지 출력하고 현재 페이지에서 disabled 클래스를 사용하여 버튼을 비활성화한다.