220715 오늘의 훈련

약간 페이징의 마지막 단계적 느낌적 느낌

• 페이지를 하나하나 이동하는 버튼(이동할 페이지가 없으면 사라진다)
• 한번에 페이지를 건너뛰는 버튼(이동할 다음 페이지가 없으면 사라진다)
• 현재 페이지를 확인하는 기능
  전체페이지를 확인하기때문에 페이지 수는 실시간으로 늘어난다.

자바스크립트로 페이지를 계산해서 지워..버렸다.
신기했던 점
$("#page${thisPage }").attr("style","background-color:skyblue;");
과 같이 c:forEach 반복문에 들어있는 el표기를 자바스크립트 아이디값 변수로 사용가능하다는 점..

			$("#page${thisPage }").attr("style","background-color:skyblue;");
		
	 		if(thisPage==1){
	 			$("#prePage").attr("style","visibility:hidden;");
	 		}
	 		
	 		if(nextPage==1){
	 			$("#prePrePage").attr("style","visibility:hidden;");
	 		}
	 		
	 		if(thisPage >= maxPage){
	 			$("#nextPage").attr("style","visibility:hidden;");
	 			$("#nextNextPage").attr("style","visibility:hidden;");
	 		}
	 		
	 		if(nextPage+4 >= maxPage){
	 			$("#nextNextPage").attr("style","visibility:hidden;");
	 		}

prePrePage는 페이지를 아예 넘겨버리는 버튼이다.
prePage는 하나씩 움직이는 버튼이다
처음에 반복문을 하나만 돌렸을때는 마지막 페이지를+4로 했기때문에 6페이지 까지 있어도 10페이지 까지 나오는 일이 일어나서 그냥 페이지 하나하나를 조건으로 걸었다..
다음에는 그냥 함수로 처리해보도록 하자..

		<a id="prePrePage" href="MainListServlet?page=${nextPage-5 }"><<</a>
		<a id="prePage" style="" href="MainListServlet?page=${thisPage-1 }">◀</a>
		
		<% if((nextPage) >= maxPage){%>
			<c:forEach var="i" begin="${nextPage }" end="${maxPage }" varStatus="status">
			<span id="page${i}" value="${i}"><a href="MainListServlet?page=${i}"><c:out value="${i}" /></a></span>
			</c:forEach>
		<%}else if((nextPage+1) >= maxPage){%>
			<c:forEach var="i" begin="${nextPage }" end="${nextPage+1 }" varStatus="status">
			<span id="page${i}" value="${i}"><a href="MainListServlet?page=${i}"><c:out value="${i}" /></a></span>
			</c:forEach>
		<%}else if((nextPage+2) >= maxPage){%>
			<c:forEach var="i" begin="${nextPage }" end="${nextPage+2 }" varStatus="status">
			<span id="page${i}" value="${i}"><a href="MainListServlet?page=${i}"><c:out value="${i}" /></a></span>
			</c:forEach>
		<%}else if((nextPage+3) >= maxPage){%>
			<c:forEach var="i" begin="${nextPage }" end="${nextPage+3 }" varStatus="status">
			<span id="page${i}" value="${i}"><a href="MainListServlet?page=${i}"><c:out value="${i}" /></a></span>
			</c:forEach>
		<%}else {%>
			<c:forEach var="i" begin="${nextPage }" end="${nextPage+4 }" varStatus="status">
			<span id="page${i}" value="${i}"><a href="MainListServlet?page=${i}"><c:out value="${i}" /></a></span>
			</c:forEach>
			<%} %>
	
		 <a id="nextPage" href="MainListServlet?page=${thisPage+1 }">▶</a>
		 <a id="nextNextPage" href="MainListServlet?page=${nextPage+5 }">>></a>