el태그로 반복문 처리할 때 오류(feat jsp 표현식)

문제 상황

페이징 처리를 하는데(부트스트랩 사용) 처음에 Prev와 Next 버튼은 적용이 안됐는데  <c:forEach>부분은 적용이 안됐다. for문으로 돌려서 값이 잘 나왔지만 누르면 넘어가야 하는데 안넘어가고 이상한 숫자가 넘어와서 넘어가지 않았다. 

 

JSP파일

<div class="row">
    <input type="hidden" id="currentPg" value="${pvo.currentPage}">
    <input type="hidden" id="cvoCategory" value="${cvo.category}"/>
    <ul class="pagination justify-content-center" id="paging">
        <c:if test="${pvo.currentPage==1}">
            <li class="page-item disabled"><a class="page-link" href="javascript:void(0);" id="prevBtn">Prev</a></li>
        </c:if>
        <c:if test="${pvo.currentPage>1}">
            <li class="page-item"><a class="page-link" href="javascript:void(0);" id="prevBtn">Prev</a></li>
        </c:if>
        <c:forEach var="p" begin="${pvo.startPage}" end="${pvo.totalPage}">
            <c:if test="${p<=pvo.totalPage}">
                <c:choose>
                    <c:when test="${p==pvo.currentPage}">
                        <li class="page-item disabled"><a class="page-link">${p}</a></li>
                    </c:when>
                    <c:when test="${p!=pvo.currentPage}">
                        <li class="page-item"><a class="page-link" href="javascript:void(0);" id="page">${p}</a></li>
                    </c:when>
                </c:choose>
            </c:if>
        </c:forEach>
        <c:if test="${pvo.currentPage==pvo.totalPage}">
            <li class="page-item disabled"><a class="page-link" href="javascript:void(0);" id="nextBtn">Next</a></li>
        </c:if>
        <c:if test="${pvo.currentPage<pvo.totalPage}">
            <li class="page-item"><a class="page-link" href="javascript:void(0);" id="nextBtn">Next</a></li>
        </c:if>
    </ul>
</div>

 

JS파일

JS파일에서는 JSP el 표현식을 사용할 수 없어서 <input type="hidden>으로 한 뒤에 val( )값을 가져오는 식으로 해서

맵핑을 했다. 

$(function(){
	
	let currentPg = $("#currentPg").val();
	let nextBtn = Number(currentPg) + 1;
	let prevBtn = Number(currentPg) - 1;
	
	let page = $("#page").text();
	let pageBody = Number(page);
	let category = $("#cvoCategory").val();
	
	$("#prevBtn").click(function(){
		location.href="/board/shareAndReqList?currentPage="+prevBtn+"&category="+category+"";
	})
	
	$("#page").click(function(){
		location.href="/board/shareAndReqList?currentPage="+pageBody+"&category="+category+"";
	})
	
	$("#nextBtn").click(function(){
		location.href="/board/shareAndReqList?currentPage="+nextBtn+"&category="+category+"";
	})
	
});

 

---

변경하고 난뒤의 JSP 파일과 JS 파일

jquery가 아니라 자바 스크립트 함수(onclick)으로 사용하면 매개변수로 jsp 표현식을 쓸 수 있기 때문에 <input type="hidden">이 없어도 되어서 굳이 사용하지 않았고 조금 더 심플(?)하게 코드를 작성할 수 있었다. 

자바스크립트 함수 잘 사용하자...!

 

JSP파일

<div class="row">
        <ul class="pagination justify-content-center" id="paging">
            <c:if test="${pvo.currentPage==1}">
                <li class="page-item disabled"><a class="page-link" id="prevBtn">Prev</a></li>
            </c:if>
            <c:if test="${pvo.currentPage>1}">
                <li class="page-item"><a class="page-link" href="javascript:void(0);" id="prevBtn" 
                        onclick="goPrev(${pvo.currentPage},'${cvo.category}')">Prev</a></li>
            </c:if>
            <c:forEach var="p" begin="${pvo.startPage}" end="${pvo.totalPage}">
                <c:if test="${p<=pvo.totalPage}">
                    <c:choose>
                        <c:when test="${p==pvo.currentPage}">
                            <li class="page-item disabled"><a class="page-link">${p}</a></li>
                        </c:when>
                        <c:when test="${p!=pvo.currentPage}">
                            <li class="page-item"><a class="page-link"href="javascript:void(0);"
                                    onclick="goPage(${p},'${cvo.category}')">${p}</a></li>
                        </c:when>
                    </c:choose>
                </c:if>
            </c:forEach>
            <c:if test="${pvo.currentPage==pvo.totalPage}">
                <li class="page-item disabled"><a class="page-link" id="nextBtn">Next</a></li>
            </c:if>
            <c:if test="${pvo.currentPage<pvo.totalPage}">
                <li class="page-item"><a class="page-link" href="javascript:void(0);" id="nextBtn"
                        onclick="goNext(${pvo.currentPage},'${cvo.category}')">Next</a></li>
            </c:if>
        </ul>
   </div>

 

변경하고 난 뒤의 JS파일 

function goPrev(gp, category){
   let goPrev = gp-1;
   location.href="/board/shareAndReqList?currentPage="+goPrev+"&category="+category+"";
}

function goPage(p, category){
   location.href="/board/shareAndReqList?currentPage="+p+"&category="+category+"";
}

function goNext(gn, category){
   let goNext = gn+1;
   location.href="/board/shareAndReqList?currentPage="+goNext+"&category="+category+"";
}