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

Pager에서 현재 페이지 번호 처리하기

 

<div class="indexer margin-top align-right">
<h3 class="hidden">현재 페이지</h3>
<div>
<span class="text-orange text-strong">1</span> / 1 pages
</div>
</div>

 

p 값이 빈 문자열이거나 null값일 때 참을 반환하는 EL연산자 중 empty를 사용한다.

<div class="indexer margin-top align-right">
<h3 class="hidden">현재 페이지</h3>
<div>
<span class="text-orange text-strong">${(empty param.p)?1:param.p}</span> / 1 pages
</div>
</div>

 

style을 이용해 현재 보고 있는 페이지 넘버를 강조 표시하기.

 

지난번에 사용했던 page변수를 이용해 반복될 때 page값이랑 같을 때 강조하도록 한다.

<c:set var="page" value="${(empty param.p)?1:param.p}"></c:set>
<c:set var="startNum" value="${page -(page-1)%5}"></c:set>
<c:set var="lastNum" value="23"></c:set>

<div>
<c:if test="${startNum>1}">
<a href="?p=${startNum-1}&f=&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">
<c:forEach var="i" begin="0" end="4">
<li><a class="-text- ${(page==(startNum+i))?'orange':''}  bold"
href="?p=${startNum+i}&f=${param.f}&q=${param.q}">${startNum+i}</a></li>
</c:forEach>
</ul>

삼항 연산자를 사용할 때 문자열을 더블퀘테이션으로 감싸주면 html파싱 할 때 오류가 발생되므로 El에서는 싱글퀘테이션을 지원한다.

 

<li><a class="-text- ${(page==(startNum+i))?'orange':''}  bold"
href="?p=${startNum+i}&f=${param.f}&q=${param.q}">${startNum+i}</a></li>

 

마지막 번호 처리하기

 

게시글있는 곳까지 마지막 번호를 설정해야 한다.

번호를 클릭했을 때 페이지가 없을 수 있으므로 수정.

 

 

먼저 service함수에서 카운트 값을 읽고는 작업을 합니다.

if(rs.next())
count = rs.getInt("count");

 

다음에 컨트롤러에서 값을 받아 뷰에게 넘겨주는 작업을 합니다.

int count = service.getNoticeCount(field,query);
request.setAttribute("count", count);

 

뷰에서 El연산자를 사용해 출력하되 10씩 나누어서 페이지를 출력하려 하지만 , 소수점이 존재한다면 ceil함수를 이용해 다음 페이지까지 만들어줍니다.

함수를 사용하기 위해 taglib를 추가해줍니다

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

 

<c:set var="lastNum" value="${fn:substringBefore(Math.ceil(count/10),'.')}"></c:set>

 

substringBefore함수는 첫 번째 인자의 값에서 두 번째 인자에 해당되는 구분자를 제외합니다.

Math.ceil은 소수점이 존재할 때 그 값을 반올림시킵니다.

Math.ceil을 사용하게 되면 11.0 이런 식으로 실수형으로 나오므로 그 값을 처리하기 위해 substringBefore을 사용합니다.

 

이렇게 마지막 번호를 구했다면 

 

<h3 class="hidden">현재 페이지</h3>
<div>
<span class="text-orange text-strong">${(empty param.p)?1:param.p}</span>
/ ${lastNum} pages
</div>

마지막 페이지를 보여주도록 설정을 하고

 

다음 페이지의 조건식을 라스트 페이지에 맞게 변경해줍니다.

<c:if test="${startNum+4 < lastNum}">
<a href="?p=${startNum+4}&f=&q=" class="btn btn-next">다음</a>
</c:if>
<c:if test="${startNum+4 >= lastNum}">
<span class="btn btn-next" onclick="alert('다음 페이지가 없습니다.');">다음</span>
</c:if>

 

 

그리고 페이지가 있는 곳까지만 번호를 생성하기 위해 <c:if> 태그를 사용합니다.

<c:forEach var="i" begin="0" end="4">
<c:if test="${(startNum+i) <=lastNum)}">
<li><a
class="-text- ${(page==(startNum+i))?'orange':''}  bold"
href="?p=${startNum+i}&f=${param.f}&q=${param.q}">${startNum+i}</a></li>
</c:if>
</c:forEach>