Spring 게시판 만들기(19)

가져온 데이터 이후 페이징 구현작업

전체 게시물 수 가져오기

먼저, xml에서 SELCET문을 이용해 전체 게시물 개수를 가져오고

mapper와 service에도 연결 컨트롤러까지 연결작업을 마친다

편의를 위해 한곳에 쓰겠다

	<select id="getTotalCount" resultType="int">
		select count(*) from tbl_board
	</select>
        
// 현재는 검색기능 제외
int getTotalCount();

int getTotalCount();

	@Override
	public int getTotalCount() {
		
		return mapper.getTotalCount();
	}

---

컨트롤러와 연결 후 jsp로 연동하기

// 2) jsp(뷰)에서 페이징기능 구현(PageDTO클래스).  1  2  3  4  5  next
int total = service.getTotalCount();

PageDTO pageDTO = new PageDTO(cri, total);
model.addAttribute("pageMaker", pageDTO);

PageDTO를 가져오면서 PageDTO메서드에 cri, total변수를 가져올수 있도록 한다

그리고 “pageMaker”을 이용해 list.jsp 파일에 넣어준다

PageDTO에 @Getter과 @ToString 작업을 해주고 넘어간다

jsp 파일 작업

먼저 prev와 next작업 먼저 진행

<!-- 페이징 네비게이션 바 -->
<nav aria-label="...">
    <ul class="pagination">

        <!-- 이전표시 -->
        <c:if test="${pageMaker.prev }">
            <li class="page-item disabled">
                <span class="page-link">Previous</span>
            </li>
        </c:if>	

        <c:forEach begin="${pageMaker.startPage }" end="${pageMaker.endPage }" var="num">
            <li class='page-item ${pageMaker.cri.pageNum == num ? "active":"" }'><a class="page-link" href="${num }">${num }</a></li>
        </c:forEach>

        <!-- 
<li class="page-item active" aria-current="page">
<span class="page-link">2</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
-->

        <!-- 다음표시 -->
        <c:if test="${pageMaker.next }">
            <li class="page-item">
                <a class="page-link" href="#">Next</a>
            </li>
        </c:if>

    </ul>
</nav>

이후 비쥬얼 스튜디오에서 자바스크립트 작성

하기 전, 제이쿼리 최신 폼 가져오기

li는 <li>호출 .page-item은 클래스 호출을 의미

click 시에 해당 기능을 수행하는데 url에 변수를 넣는다

그래서 클릭시 해당 url로 이동하도록 location을 넣는다

    <script>
      $(document).ready(function(){
        // 페이지 번호 클릭시 동작. 이전 1  2  3  4  5  다음
        $("li.page-item a.page-link").on("click", function(e){
            e.preventDefault(); // 태그의 기본득성을 제거. <a>태그의 링크기능을 제거
            let url = "list?pageNum=" + $(this).attr("href") + "&amount=10";
            location.href = url;
        });
      });
    </script>

다시 jsp파일에서 previou와 next에 페이지 넘김 링크주소를 넣어준다

	<!-- 페이징 네비게이션 바 -->
	<nav aria-label="...">
	  <ul class="pagination">
	  
	  	<!-- 이전표시 -->
	  	<c:if test="${pageMaker.prev }">
	    	<li class="page-item">
	      		<a class="page-link" href="${pageMaker.startPage - 1 }">Previous</a>
	    	</li>
	    </c:if>
	    
	    <c:forEach begin="${pageMaker.startPage }" end="${pageMaker.endPage }" var="num">
	    	<li class='page-item ${pageMaker.cri.pageNum == num ? "active":"" }'><a class="page-link" href="${num }">${num }</a></li>
	    </c:forEach>
	    
	    <!-- 
	    <li class="page-item active" aria-current="page">
	      <span class="page-link">2</span>
	    </li>
	    <li class="page-item"><a class="page-link" href="#">3</a></li>
	     -->
	     
	    <!-- 다음표시 -->
	    <c:if test="${pageMaker.next }">
		    <li class="page-item">
		      <a class="page-link" href="${pageMaker.endPage + 1 }">Next</a>
		    </li>
		</c:if>