힘내보자

이제 좀 페이지네이션 프론트코드를 좀 이해가 가는 듯

일단 첫수랑 끝수가 해당 조건 만족해야 나오는 다음 이전 버튼 하나 만들고

이전이면 1보다 현재번호가 크면 c:url과 c:param으로 페이지번호를 보내주면서 url주소이동시키는 c:if하나인 식

근데 아직 끝번호 쪽이랑 페이지번호 쪽 test속성 조건쪽이 잘 이해가 안간다

반복이 살 길이다!!

<tr align="center" height="20" id="buttonTab">
    <td colspan="6">
        <!-- [이전] -->
        <c:if test="${ pi.currentPage <= 1 }">
            [이전]
        </c:if>
        <c:if test="${ pi.currentPage > 1 }">
            <c:url var="before" value="blist.bo">
                <c:param name="page" value="${ pi.currentPage - 1 }"/>
            </c:url>
            <a href="${ before }">[이전]</a> &nbsp;
        </c:if>



        <!-- 페이지 번호 -->
        <c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
            <c:if test="${ p == pi.currentPage }">
                <font color="red" size="4"><b>[${ p }]</b></font>
            </c:if>

            <c:if test="${ p != pi.currentPage }">
                <c:url var="pagination" value="blist.bo">
                    <c:param name="page" value="${ p }"/>
                </c:url>
                <a href="${ pagination }">[${ p }]</a> &nbsp;
            </c:if>
        </c:forEach>

        <!-- [다음] -->
        <c:if test="${ pi.currentPage >= maxPage }">
            [다음]
        </c:if>
        <c:if test="${ pi.currentPage <= maxPage }">
            <c:url var="after" value="blist.bo">
                <c:param name="page" value="${ pi.currentPage + 1 }"/>
            </c:url>	
            <a href="${after }">[다음]</a>
        </c:if>
    </td>
</tr>

1번
href가 실행되게 되면 ${before}가
var속성에 설정된 var="before"를 호출하고 

2번
<c:url>에 같은 속성인 value에 있는 notice.bo로 데이터를 보내는데
<c:param>의 정보들도 같이 실어 보내야하니 ( name="page" value="${ pi.currentPage - 1 }

3번
notice.bo 호출

위의 이미지눈 게시판 페이징 처리한 화면이다

윗줄은 현재페이지가 보이는 않는 문제가 있었고

아랫줄은 해결하고 [ ]로 현재페이지 숫자를 감싸서 현재 어떤 페이지를 보고 있는지를 나타나게 해준 화면이다

가운데 페이지 부분에 ${ p eq pi.currentPage }, ${ p ne pi.currentPage }으로 if문으로 나눠서

같을 경우 페이지 번호가 나오고 눌리지 않게하고, 다를 경우 해당 번호의 url로 이동할 수 있게 해서 해결했다

<!-- 페이지 -->
<c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
   <c:if test="${ p eq pi.currentPage }">
      <li class="uk-active"><span>[${ p }]</span></li>
   </c:if>

   <c:if test="${ p ne pi.currentPage }">
      <c:url var="pagination" value="notice.bo">
         <c:param name="page" value="${ p }"/>
      </c:url>
       <li><a href="${ pagination }">${ p }</a></li>&nbsp;
   </c:if>
</c:forEach>

추가로 원래 코드에서 디자인을 개선해보고자 UIKit로 다시 만들어보았다

html  css + EL, JSTL 코드

    <!-- Pagination -->
                <div class="pagination">
                        <!-- [이전] -->
                    <c:if test="${ pi.currentPage <= 1 }">
                        <!-- [이전]  ≪  &nbsp; -->
                        	 ≪  &nbsp;  <!-- 1페이지에서만 나오는 기호 설정. 마찬가지로 마지막페이지에서 나오는 기호도 따로 지정해줘야함 -->
                    </c:if>
                    <c:if test="${ pi.currentPage > 1 }">
                        <c:url var="before" value="notice.bo">
                            <c:param name="page" value="${ pi.currentPage - 1 }"/>
                        </c:url>
                        <%-- <a href="${ before }">[이전]</a> &nbsp; --%>
                        <a href="${ before }">≪</a> &nbsp;
                    </c:if>
                    
                    <!-- 페이지 -->
                    <c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
                        <c:if test="${ p eq pi.currentPage }">
                            <font color="red" size="4"><b>[${ p }]</b></font>
                        </c:if>
                        
                        <c:if test="${ p ne pi.currentPage }">
                            <c:url var="pagination" value="notice.bo">               <!-- 현재페이지가 지워지는 문제 화면에서  -->
                                <c:param name="page" value="${ p }"/>
                            </c:url>
                            <a href="${ pagination }">${ p }</a> &nbsp;
                        </c:if>
                    </c:forEach>
                    
                    <!-- [다음] -->
                    <c:if test="${ pi.currentPage >= pi.maxPage }">
                        <!-- [다음]  ≫ -->
                     	 ≫		<!-- 마지막 페이지에서만 나오는 기호 설정. 마찬가지로 첫페이지에서 나오는 기호도 따로 지정해줘야함 -->
                    </c:if>
                    <c:if test="${ pi.currentPage < pi.maxPage }">
                        <c:url var="after" value="notice.bo">
                            <c:param name="page" value="${ pi.currentPage + 1 }"/>
                        </c:url> 
                        <%-- <a href="${ after }">[다음]</a> --%>
                        <a href="${ after }"> ≫ </a>
                    </c:if>        
                </div>

UIKit  + EL, JSTL 코드

<!-- 페이징 처리 -->
         <ul class="uk-pagination uk-flex-center" uk-margin>
            <!-- [이전] -->
            <c:if test="${ pi.currentPage <= 1 }">
               <li><a href="#"><span uk-pagination-previous></span></a></li> &nbsp;
            </c:if>
            <c:if test="${ pi.currentPage > 1 }">
               <c:url var="before" value="notice.bo">
                  <c:param name="page" value="${ pi.currentPage - 1 }"/>
               </c:url>
               <li><a href="${ before }"><span uk-pagination-previous></span></a></li>
            </c:if>
            
            <!-- 페이지 -->
            <c:forEach var="p" begin="${ pi.startPage }" end="${ pi.endPage }">
               <c:if test="${ p eq pi.currentPage }">
                  <li class="uk-active"><span>[${ p }]</span></li>
               </c:if>
               
               <c:if test="${ p ne pi.currentPage }">
                  <c:url var="pagination" value="notice.bo">
                     <c:param name="page" value="${ p }"/>
                  </c:url>
                   <li><a href="${ pagination }">${ p }</a></li>&nbsp;
               </c:if>
            </c:forEach>
            
            <!-- [다음] -->
            <c:if test="${ pi.currentPage >= pi.maxPage }">
               <li><a href="#"><span uk-pagination-next></span></a></li> &nbsp;
            </c:if>
            <c:if test="${ pi.currentPage < pi.maxPage }">
               <c:url var="after" value="notice.bo">
                  <c:param name="page" value="${ pi.currentPage + 1 }"/>
               </c:url> 
               <li><a href="${ after }"><span uk-pagination-next></span></a></li>
            </c:if>
     	 </ul>

페이징처리 뷰단 코드 써보기

손코딩

<!-- 페이징처리 tr -->
		<tr align="center" height="20" id="buttonTab">
			<td colspan="6">
				<!-- prev -->
				<c:if test="${ pi.currentPage <= 1 }">
					[이전] &nbsp;
				</c:if>
				<c:if test="${ pi.currentPage > 1 }">
					<c:url var="before" value="blist.bo">
						<c:param name="page" value="${ pi.currentPage - 1 }"/>
					</c:url>
					<a href="${ before }">[이전]</a>&nbsp;
				</c:if>
			
				<!-- 페이지번호 -->
				<c:forEach var="p" begin="${pi.startPage }" end="${pi.endPage }">
					<c:if test="${ p == pi.currentPage }">
						<font color="red" size="4"><b>[${p}]</b></font>
					</c:if>
					
					<c:if test="${ p ne pi.currentPage }">
						<c:url var="pagination" value="blist.bo">
							<c:param name="page" value="${ p }"/>
						</c:url>
					</c:if>
					<a href="${ pagination }">${p}</a> &nbsp;
				</c:forEach>
				<!-- next -->
				<c:if test="${pi.currentPage >= maxPage }">
					[다음]
				</c:if>
				<c:if test="${pi.currentPage < pi.maxPage }">
					<c:url var="after" value="blist.bo">
						<c:param name="page" value="${pi.currentPage + 1 }"/>
					</c:url>
					<a href="${ after }">[다음]</a>
				</c:if>
			</td>
		</tr>