SPRING(08.20) - 정적, 동적 페이지네이션

정적 페이지네이션

 

 

<div class="pagination flex justify-center mt-3">
	<div class="btn-group">

		<c:forEach begin="1" end="${pagesCount }" var="i">
			<a class="btn btn-sm ${param.page == i ? 'btn-active':''}" href="?page=${i }&boardId=${param.boardId}">${i }</a>
		</c:forEach>
	</div>
</div>

 

위는 정적 페이지네이션을 가리킨다. btn-group으로 묶어주고 for-each 구문으로
(pagesCount는 controller에서 전체 게시글 수를 10(화면에 보여주고싶은 게시글 수)으로 나누어서 int로 반환한 값) 1부터 전체 페이지 수까지를 나타내었다.

a 태그에서는 param.page(클릭한 페이지에 해당하는 번호)와 i(같은 번호를 갖는 페이지)값 이 같아면 btn-active를 하고 아니면 ''를 보낸다는 것이다. btn-active 클래스를 적용하면, 현재 페이지 번호를 나타내는 버튼을 확인할 수 있어서 사용자가 어느 페이지를 클릭하였는지 쉽게 알 수 있다.

그리고 href에 해당 페이지 번호를 보내어 그에 해당하는 게시글을 볼 수 있게끔 하였다.

하지만 정적 페이지네이션은 게시글이 많이 없을 경우 문제는 없어보이지만, 글이 많아질수록 페이지 수도 당연히 늘어나기에 위의 사진과 같이 클릭할 수 있는 페이지 버튼 또한 많아져 점점 아래로 밀려 한눈에 보기 어렵고 사용자가 이용하기 불편하다.

---

 

동적 페이지네이션

<div class="pagination flex justify-center mt-3">
		<c:set var="paginationLen" value="3" />
		<c:set var="startPage" value="${page - paginationLen >= 1 ? page - paginationLen : 1 }" />
		<c:set var="endPage" value="${page + paginationLen <= pagesCount ? page + paginationLen : pagesCount}" />

		<c:if test="${startPage > 1 }">
			<a class="btn btn-sm" href="?page=1&boardId=${boardId }">1</a>
		</c:if>

		<c:if test="${startPage > 2 }">
			<button class="btn btn-sm btn-disabled">...</button>
		</c:if>

		<c:forEach begin="${startPage }" end="${endPage }" var="i">
			<a class="btn btn-sm ${param.page == i ? 'btn-active' : '' }" href="?page=${i }&boardId=${boardId}">${i }</a>
		</c:forEach>

		<c:if test="${endPage < pagesCount - 1 }">
			<button class="btn btn-sm btn-disabled">...</button>
		</c:if>

		<c:if test="${endPage < pagesCount }">
			<a class="btn btn-sm" href="?page=${pagesCount }&boardId=${boardId }">${pagesCount }</a>
		</c:if>
	</div>

 

 

위는 동적 페이지네이션이다. paginationLen은 표시할 페이지 길이를 설정, 3으로 설정되어 있기에 현재 페이지를 중심으로 이전 페이지 3개, 이후 페이지 3개가 표시된다.

startPage는 현재 페이지에서 paginationLen 만큼 이전 페이지를 계산하여 화면에 얼만큼 보여줄지 결정한다. page - paginationLen값이 1보다 작아지면 시작 페이지를 1로 설정된다.

endPage는 현재 페이지에서 paginationLen 만큼 이후 페이지를 계산하여 화면에 얼만큼 보여줄지 결정하고, page + paginationLen값이 전체 페이지 수보다 크면 끝 페이지는 전체 페이지 수로 설정한 것이다.

<c:if test="${startPage > 1 }">
	<a class="btn btn-sm" href="?page=1&boardId=${boardId }">1</a>
</c:if>

 

 

위 코드를 따로 작성하지 않으면 맨앞페이지로 가고싶을 경우 하나하나 앞으로 가는 방법밖에 없다.. 그러므로 startPage가 1보다 큰 경우(page - paginationLen이므로 page 4부터 ) 현재 페이지가 시작 페이지보다 멀리 떨어져 있을 경우, 첫 페이지로 이동할 수 있도록 하였다.

 

 

<c:if test="${startPage > 2 }">
			<button class="btn btn-sm btn-disabled">...</button>
		</c:if>

 

startPage가 2보다 큰 경우(page - paginationLen이므로 page 6부터 ), 페이지 사이의 간격을 표시하기 위해 '...'

<c:forEach begin="${startPage }" end="${endPage }" var="i">
	<a class="btn btn-sm ${param.page == i ? 'btn-active' : '' }" href="?page=${i }&boardId=${boardId}">${i }</a>
</c:forEach>

 

정적 페이지네이션과 거의 동일하다고 보면된다

동적 페이지네이션을 해줌으로써 많은 페이지 중에서 현재 페이지와 지정한 몇 개의 페이지를 볼 수 있다.(한눈에 보기 좋아짐) 그리고 처음과 끝 페이지로 이동하기 쉬워졌다.

 

---

 

 

아직 동적 페이지네이션을 아무것도 보지 않은 상태에서 구현하기에 어렵지만.. 익숙해지도록 더 많이 보고 손가락을 움직여야겠다..