728x90
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div class="paging">
<div class="element">
<c:set var="page" value="${currentpage}"/>
<!-- page maxpage를 넘었을 경우 제한 -->
<c:if test="${page > maxpage}">
<c:set var="page" value="${maxpage}"/>
</c:if>
<!-- 페이지를 8개씩 나누기 위해 현재 페이지에 보여줄 max값 설정 -->
<fmt:formatNumber value="${page/8 - (page/8 % 1)}" type="pattern" pattern="0" var="full"/>
<c:set var="full" value="${full * 8}"/>
<!-- prev(전페이지), next(다음페이지) 개수 설정 -->
<c:set var="scope" value="${page%8}"/>
<c:choose>
<c:when test="${scope == 0}">
<c:set var="prev" value="8"/>
<c:set var="next" value="1"/>
</c:when>
<c:when test="${scope < 9}">
<c:set var="prev" value="${scope}"/>
<c:set var="next" value="${9-scope}"/>
</c:when>
</c:choose>
<!-- prev 버튼 -->
<c:if test="${page > 8}">
<fmt:formatNumber value="${(page-1)/8 - (((page-1)/8) % 1)}" type="pattern" pattern="0" var="prevb"/>
<c:set value="${(prevb-1)*8 + 1}" var="prevb"/>
<span id="prevBtn" class="prev button" value="${prevb}"></span>
</c:if>
<!-- 전 페이지 -->
<c:if test="${page != 1}">
<c:set var="j" value="${prev}"/>
<c:forEach var="i" begin="1" end="${prev-1}">
<c:set var="j" value="${j - 1}"/>
<c:if test="${(page - j) > 0}">
<span class="no">${page - j}</span>
</c:if>
</c:forEach>
</c:if>
<!-- 현재 페이지 -->
<span class="no selected">${page}</span>
<!-- 다음 페이지 -->
<c:if test="${page != maxpage}">
<c:forEach var="i" begin="1" end="${next-1}">
<c:if test="${maxpage >= page+i}">
<span class="no">${page+i}</span>
</c:if>
</c:forEach>
</c:if>
<!-- next 버튼 -->
<c:if test="${maxpage >= page + next}">
<fmt:formatNumber value="${(page-1)/8 - (((page-1)/8) % 1)}" type="pattern" pattern="0" var="nextb"/>
<c:set value="${(nextb+1)*8 + 1}" var="nextb"/>
<span id="nextBtn" class="next button" value="${nextb}"></span>
</c:if>
</div>
</div>
페이징을 쓸 일이 많을 것 같아 jsp에서의 재사용을 위해 jstl 태그로 만들었다.
java 백엔드 단에서 ${maxpage}와 ${currentpage} 를 보내주면 페이지를 만들어주는 형식.
기본은 8페이지 반복으로 해놓았다.
재사용가능!
'it > programming' 카테고리의 다른 글
| [Javascript] 금액을 한글로 변환하기 (9) | 2015.02.17 |
|---|---|
| javascript (jQuery) 윤년 처리하기 (0) | 2014.12.29 |
| 한솔닷컴 리뉴얼 예정 UI (0) | 2014.06.28 |