본문 바로가기
웹 프로그래밍 기초/자바기반의 웹&앱 응용SW 개발자

자바기반의 웹&앱 응용 SW개발자 양성과정 42일차 -64

by oncerun 2020. 5. 1.
반응형

JSTL 사용하여 게시판 페이지 번호 출력하기.

 

<c:set> 태그의 속성

 

- value 속성 : 값을 입력합니다. el을 사용할 수 있습니다.

- target 속성 : 프로퍼티를 설정한 Bean 또는 Map을 가집니다.

- property 속성 : 설정할 프로퍼티입니다.

- var 속성 : 값이 저장되는 변 수명입니다.

- scope 속성 : 변수가 저장된 Scope입니다. page, request, session, application을 가질 수 있고, 기본값은 page입니다.

 

1. <c:forEach> 태그 이용해 변수에 값 담아 출력해주기.

 

공지사항 밑부분의 있는 페이지 번호를 1부터 5까지 만들어본다.

<c:forEach var="i" begin="0" end="4">

<li><a href="?p=${i+1}">${i+1}</a></li>

</c:forEach>

i 변수에 0부터 4까지 값을 담아서 출력해주기.

 

2. 다음 페이지 버튼을 눌렀을 때 6부터 5개의 숫자 가나 오도록 하기.

만약? p=값이 23이라면 21 22 23 24 25의 숫자가 나와야 하며 p값을 23 ,24여도 값을 21로 만들어주면 된다.

따라서 p - (p-1)%5 값으로 변숫값을 지정해준다.

 

<c:set var="page" value="${(param.p ==null)? 1:param.p}"

<c:set var="startNum" value="&{page - (page-1)%5}"></c:set>

여기서 param은 받아온 파라미터의 집합이다.

 

적용 전  forEach문 또한 startNum을 이용한다.

<c:forEach var="i" begin="0" end="4">

<li><a href="?p=${startNum+1}">${i+startNum}</a></li>

</c:forEach>
<a href="?p=${startNum+5}&t=&q=" class="btn btn-next">다음</a>

따라서 다음을 눌렀을 때 +5씩 증가된 페이지 넘버를 볼 수 있다.

 

만약 다음 페이지와 이전 페이지가 존재하지 않을 때 요청하는 경우 또한 대비해야 한다.

 

JSTL에서는 조건을 줄 수 있는 <c:if> 태그를 사용할 수 있다. 다만 if~else 같은 태그는 없으므로 배타적으로 조건식을 작성한다.

 

임의로 lastNum을  23이라 정한다.

 

<c:set var="lastNum" value="23"></c:set>

 

다음 페이지 설정

 

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

test 값에 조건을 주어  보일 수 있는 최대 페이지 넘버보다 마지막 값이 클 경우 다음 페이지 넘버를 보여주며

그렇지 않은 경우 알람이 뜨는 링크를 보이도록 한다.

 

이전 페이지 설정

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

startNum 변수에서 -1을 해주게 되면 자동적으로 이전 페이지가 forEach문을 통해 출력되므로 1보다 클 경우 이전 페이지를 보여주며 그렇지 않은 경우 알람 창 이벤트를 발생하는 태그를 출력한다.

 

반응형

댓글