11.공지사항 페이징2

공지사항 페이징

3.service처리

• Noticeservice.java

	List<NoticeVO> getNoticePaging(Criteria cri);

	public int getNoticeTotal(Criteria cri);

메서드를 선언한다.

• Noticeservicelmpl.java

	// 페이징 적용
	public List<NoticeVO> getNoticePaging(Criteria cri) {

		return noticemapper.getNoticePaging(cri);
	}

	public int getNoticeTotal(Criteria cri) {

		return noticemapper.getNoticeTotal(cri);
	}

오버라이딩하여 구현 한다

 

4.Controller 처리

@RequestMapping(value = "/notice-list")
	public String noticeListForm(Model model, Criteria cri) {

		System.out.println("공지사항목록 페이지 페이징..");

Criteria를 부여 해준다. criteria 데이터를 이용하여 공지사항 목록 데이터를 반환하는 쿼리를 실행하게 된다.

@RequestMapping(value = "/notice-list")
	public String noticeListForm(Model model, Criteria cri) {

		System.out.println("공지사항목록 페이지 페이징..");

		model.addAttribute("list", noticeservice.getNoticePaging(cri));

total의 값을 얻기 위해 noticeservice의 메소드를 호출한 후 해당 값과 Critera 클래스 데이터를 인자 값으로 부여하여 PageDTO를 인스턴스화 한다.

		int total = noticeservice.getNoticeTotal(cri);

		PageMakeDTO pageMake = new PageMakeDTO(cri, total);

		model.addAttribute("pageMake", pageMake);

		return "admin/notice/notice-list";

	}

pageMaker 속성명에 인스턴스 화한 PageDTO 데이터를 저장시킨다.

model에 담은 값을 view에서 사용한다.

5.view 처리

 <form action='notice-list' method="get" id="moveForm">
		<input type="hidden" name="pageNum" value="${pageMake.cri.pageNum}">
		<input type="hidden" name="amount" value="${pageMake.cri.amount}">
		<input type="hidden" name="keyWord" value="${pageMake.cri.keyWord}">
		<input type="hidden" name="searchType" value="${pageMake.cri.searchType}">
   </form>

페이지 이동 후 서버로부터 전달받은 “pageMaker” 데이터에 있는 pageNum, amount, keyword 값이 기본적으로 저장되도록 value 속성을 부여 하였다.

<div class="notice-footer w-100">
		<div class="indexer align-right">
			<span>${pageMake.cri.pageNum}/${pageMake.realEnd} pages</span>
			<ul id="pageInfo" class="notice-page pager">
				<!-- 맨앞으로 버튼 -->
				<c:if test="${pageMake.prev}">
					<li class="next pageInfo_btn"><a
						href="?pageNum=${pageMake.realStart}&amount=5"><i
							class="lni lni-angle-double-left"></i></a></li>
				</c:if>
				<!-- 이전페이지 버튼 -->
				<c:if test="${pageMake.prev}">
					<li class="prev pageInfo_btn"><a
						href="?pageNum=${pageMake.startPage-1}&amount=5"><i
							class="lni lni-chevron-left"></i></a></li>
				</c:if>
				<!-- 각 번호 페이지 버튼 -->
				<c:forEach var="num" begin="${pageMake.startPage}"
					end="${pageMake.endPage}">
					<li
						class="pageInfo_btn ${pageMake.cri.pageNum == num ? 'activePage':'' }"><a
						href="?pageNum=${num}&amount=5">${num}</a></li>
				</c:forEach>
				<!-- 다음페이지 버튼 -->
				<c:if test="${pageMake.next}">
					<li class="next pageInfo_btn"><a
						href="?pageNum=${pageMake.endPage+1}&amount=5"><i
							class="lni lni-chevron-right"></i></a></li>
				</c:if>
				<!-- 맨끝으로 버튼 -->
				<c:if test="${pageMake.next}">
					<li class="next pageInfo_btn"><a
						href="?pageNum=${pageMake.realEnd}&amount=5"><i
							class="lni lni-angle-double-right"></i></a></li>
				</c:if>
			</ul>
			<button class="write">
				<a href="<c:url value='notice-register'/>">글쓰기</a>
			</button>
		</div>
	</div>

${pageMaker.cri.pageNum == num?”activePage”:”” ‘을 작성한 이유는 현재 페이지일 경우 class 속성 값이 “pageMaker_btn active”되는데 해당 버튼에 현재 페이지임을 알 수 있도록 css 설정을 해주기 위함이다.