JSTL: if문으로 pager 이전/다음 번호 만들기

목표: if문을 사용해 pager의 이전과 다음 번호를 구현한다.

 

다음 페이지를 구현하기 위해서는 몇 페이지가 마지막 페이지인지를 알아야 한다.
이후 if문을 통해서 페이지가 없을 경우, 페이지가 있을 경우를 출력한다.

코드:

<!-- list.jsp -->
<!-- 임시변수 만드는 Tag -->
	<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 href="?p=${startNum-1}&t=&q=" class="btn btn-prev">이전</a>
	</c:if>
	<c:if test="${startNum <= 1}">
		<span class="btn btn-prev" onclick="alert('이전 페이지가 없습니다.');">이전</span>
	</c:if>
</div>	
<ul class="-list- center">
	<!-- pager반복문 -->
	<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>		

 

다음 페이지 구현 코드

 

<!-- 임시변수 만드는 Tag -->
	<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"/>

임의로 lastNum을 23으로 지정

		<!-- 다음페이지 -->
		<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>		

if문을 통해서
startNum + 5 < lastNum: 다음 페이지를 위한 버튼을 출력
위 if문의 여집합으로
startNum + 5 > 다음 페이지가 없다는 알림을 위한 버튼 출력
예) startNum = 1, lastNum=23 ☞ 6 < 23 ▷ 다음페이지 출력 
startNum = 5, lastNum=23 ☞ 25 < 23 ▷ 다음페이지가 없다는 알림

 

이전 페이지 구현 코드

	<!-- 이전페이지 -->
	<c:if test="${startNum > 1}">
		<a href="?p=${startNum-1}&t=&q=" class="btn btn-prev">이전</a>
	</c:if>
	<c:if test="${startNum <= 1}">
		<span class="btn btn-prev" onclick="alert('이전 페이지가 없습니다.');">이전</span>
	</c:if>

if문을 통해
startNum > 1: 이전 페이지를 위한 버튼을 출력
위 if문의 여집합으로
startNum < 1: 이전 페이지를 위한 버튼을 출력

결과:

이전 페이지

다음 페이지