티스토리 뷰

반응형

목표: forEach와 set을 이용해서 pager를 구현한다.

pager란?
page를 선택할 때 출력되는 숫자

		<!-- pager반복문 -->
		<c:forEach var="i" begin="0" end="4">
		<li><a class="-text- orange bold" href="?p=${1+i}&t=&q=" >${1+i}</a></li>
		</c:forEach>	

forEach를 통해서 index값 0부터 4까지 총 5번을 돌면서 그 값은 i에 전달해준다.

 pager구현 중

문제점
다른 1~5가 아닌 다른 숫자를 선택 선택했을 때 출력되는 숫자가 변경되어야 한다.

 

해결방법

예시)
3페이지를 선택하면 1 2 3 4 5 출력
17페이지를 선택하면 16 17 18 19 20 출력
19페이지를 선택하면 16 17 18 19 20 출력
 
 -> 여기서 어떤 페이지를 선택 했을때 첫 번째 출력되는 값(1 2 3 4 5이면 1)을 구하면 나머지 값들도 구할 수 있다.
나머지 연산자 %5를 이용해서 페이지가 3일 때 나머지 3이고 첫 번째 출력되는 값과 차이는 식으로 3 - (3 - 1)%5
17일 때 나머지 2와 첫 번째 출력되는 값의 차이는 17- (17 - 1)%5 , 19일 때 나머지4와 첫번째 출력되는 값의 차이는 19 - (19 - 1)%5 => 일반식으로 나타내면 page - ( pag3 - 1)%5

 

코드:

<!-- list.jsp 일부-->
</div>
	<!-- 임시변수 만드는 Tag -->
	<c:set var="page" value="${(param.p == null)?1:param.p}"/>
	<c:set var="startNum" value="${page-(page-1)%5}"/>
	
	<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:set var="page" value="${(param.p == null)?1:param.p}"/>
	<c:set var="startNum" value="${page-(page-1)%5}"/>

set을 통해서 삼항 연산자를 통해 param.p가 비어있을 경우 1, 아니면 p를 받아와서 page에 저장
page를 구하는 일반 식을 startNum에 전달

#param는 EL로부터 p값을 받아온다 -> googling........정확하게 잘 모르겠다.

		<!-- 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>		

startNum을 받아서 forEach반복문을 통해 페이지 번호를 출력

 

결과:

28페이지 선택 시 26 27 28 29 30 출력 확인

반응형
댓글
공지사항