JSTL을 이용해서 Pager 번호 만들기

pager 번호를 생성하기 위해서는 page의 시작하는 번호가 있어야 한다.

위의 사진과 같이 5page를 단위로 잡고 3page를 요청을 했다면 1, 2, 3, 4, 5 page 번호가 나와야 한다.

이를 공식화한다면 "시작하는 번호 = page - (page - 1) % 5"로 할 수 있다.

 

<c:set var="page" value="${(param.p == null) ?1:param.p}"/>
<c:set var ="startNum" value="${page-(page-1)%5 }"/>
	
<ul class="-list- center">
	<c:forEach var="i" begin="0" end="4">
		<li>
        	<a class="-text- orange bold" href="?p=${startNum+i }&t=&q=" >${startNum+i }</a>
        </li>
	</c:forEach>			
</ul>

page를 5번 반복해서 출력하기 위해 forEach 태그를 사용하여 0부터 4까지 5번 반복한다.

0부터 시작했으므로 1부터 시작하기 위해서 1을 더해줘야 한다.

그래서 처음에 page를 i+1로 줄 수 있다. 이때 위에서 정의한 공식을 startNum이라는

임시 변수로 생성해주었기 때문에 1을 startNum으로 대체할 수 있다.

그리고 page 변수는 파라미터로 전달되는 p를 뜻하는데

파라미터 p가 아무것도 전달되지 않으면(NULL) 값으로 1을 주고 값이 있다면 그 값으로 주는 것이다.

그러면 실행해보도록 하자.

파라미터 p를 7로 주면 6, 7, 8, 9, 10 page 번호가 나와야 할 것이다.

우리의 예상대로 6, 7, 8, 9, 10 page 번호가 아래의 사진과 같이 잘 나오는 것을 확인할 수 있다.

이번엔 위의 사진에서 연두색으로 된 이전, 다음 버튼을 눌렀을 때의 동작을 살펴보도록 하자.

<div>
	<c:set var="page" value="${(param.p == null) ?1:param.p}"/>
	<c:set var ="startNum" value="${page-(page-1)%5 }"/>
	<c:set var ="lastNum" value="23"/>
	
	<c:if test="${startNum>1}">
		<a class="btn btn-prev" href="?p=${startNum+-1 }&t=&q=">이전</a>
	</c:if>
	<c:if test="${startNum<=1}">
		<span class="btn btn-prev" onclick="alert('이전 페이지가 없습니다.');">이전</span>
	</c:if>		
</div>

<ul class="-list- center">
	<c:forEach var="i" begin="0" end="4">
		<li><a class="-text- orange bold" href="?p=${ startNum+i }&t=&q=" >${ startNum+i }</a></li>
	</c:forEach>			
</ul>
<div>
	<c:if test="${ startNum+5 < lastNum }">
		<a href="?p=${ startNum+5 }&t=&q=" class="btn btn-next">다음</a>
	</c:if>
	<c:if test="${ startNum+5 >= lastNum }">
		<span class="btn btn-next" onclick="alert('다음 페이지가 없습니다.');">다음</span>
	</c:if>	
</div>

연두색으로 된 이전, 다음 버튼은 눌렀을 때 이전 이후의 글 목록 페이지로 이동할 수 있고,

더 이상 넘어갈 페이지가 없다면 이전, 이후의 페이지가 없다고 알려준다.

 

만약 마지막 페이지가 23이라고 한다면

이전 페이지는 1보다 클 때의 값을 출력해야하므로 startNum>1이 된다.

이전 페이지가 없다고 알려주려면 반대로 1보다 작아야하므로 startNum<=1이 된다.

 

다음 버튼은 다음 버튼의 page 값을 startNum에서 5를 더해야 startNum이 1일 때

다음 page값이 6이 되기 때문에 startNum+5가 되어야 한다.

startNum+5(다음 번호)보다 제일 마지막 페이지인 lastNum이 제일 커야하기 때문에

startNum+5 < lastNum이 되고, 다음 버튼을 눌렀을 때 다음 페이지가 없다고 뜨기 위해서는

반대가 되기 때문에 startNum+5>=lastNum이 된다.