본문 바로가기

BackEnd/Spring

[코드로 배우는 스프링 웹 프로젝트] ch14 페이징 화면 처리 1(startPage, endPage)

728x90
반응형

◎ 페이징 화면 처리

   ▷ 화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할 수 있게 처리

      ▶ 브라우저 주소창에서 페이지 번호를 전달해서 결과를 확인하는 단계 

      ▶ JSP에서 페이지 번호를 출력하는 단계

      ▶ 각 페이지 번호에 클릭 이벤트 처리

      ▶ 전체 데이터 개수를 반영해서 페이지 번호 조절

 

 

 

1. 페이징 처리시 필요한 정보들

   ▷ 현재 페이지 번호(page)

   ▷ 이전과 다음으로 이동 가능한 링크의 표시 여부(prev, next)

   ▷ 화면에서 보여지는 페이지의 시작 번호와 끝 번호(startpage, endPage)

 

(1) 끝 페이지 번호, 시작 페이지 번호

   ▷ 페이징 처리를 위해 현재 사용자가 보고 있는 페이지의 정보가 중요

   ▷ 끝 번호를 먼저 계산해 두는 것이 수월함

 

◎ 페이지 끝 번호(endPage) 계산

this.endPage = (int)(Math.ceil(페이지번호 / 10.0)) * 10;


◎ Math.ceil() 이용시
   ▷ 1페이지 : Math.ceil(0.1) * 10 = 10
   ▷ 10페이지 : Math.ceil(1) * 10 = 10
   ▷ 11페이지 : Math.ceil(1.1) * 10 = 20

 

◎ 페이지 시작 번호(startPage) 계산

this.startPage = this.endPage - 9;


끝 번호는 전체 데이터 수에 의해 영향을 받는데 10개씩 페이지를 보여줄 경우 전체 데이터 수가 80개라면 끝 번호는 8이 되어야 함

 

◎ total을 통한 endPage의 재계산

realEnd = (int) (Math.ceil((total * 1.0) / amount) );

if(realEnd < this.endPage){
	this.endPage = realEnd;
}


전체 데이터 수(total)를 이용해 진짜 끝 페이지(realEnd)가 몇 번까지 되는지 계산
진짜 끝 페이지(realEnd)가 구해둔 끝 번호(endPage)보다 작다면 끝 번호는 작은 값이 되어야 함

 

◎ 이전(prev) 계산

this.prev = this.startPage > 1;


시작 번호가 1보다 큰 경우라면 존재함

 

◎ 다음(next) 계산

this.next = this.endPage < realEnd;


realEnd가 끝 번호(endPage)보다 큰 경우에만 존재함

   

 

2. 페이징 처리를 위한 클래스 설계

   ▷ 클래스를 구성하면 Controller 계층에서 JSP 화면에 전달할 때 객체를 생성해 Model에 담아 보내는 과정이 단순해짐

 

◎ PageDTO 클래스 생성


package org.codehows.domain;

import lombok.Getter;
import lombok.ToString;

@Getter
@ToString
public class PageDTO {
	
	private int startPage;		// 페이징 시작 번호
	private int endPage;		// 페이징 끝 번호
	private boolean prev, next;  // 이전 페이지, 다음 페이지
	
	private int total;		   // 전체 데이터 개수
	private Criteria cri;      // 현재 페이징 번호, 한페이지에 표시할 개수
	
	public PageDTO(Criteria cri, int total) {
		
		this.cri = cri;
		this.total = total;
		
		this.endPage = (int)(Math.ceil(cri.getPageNum()/10.0))*10;
		this.startPage = this.endPage - 9;
		
		int realEnd = (int) (Math.ceil((total * 1.0)/cri.getAmount()));
		
		if (realEnd < this.endPage) {
			this.endPage = realEnd;
		}
		
		this.prev = this.startPage > 1;		// 현재 페이징 시작 번호가 1보다 크다면 이전버튼(true)
		this.next = this.endPage < realEnd; // 현재 페이징 끝 번호가 전체 끝보다 작다면 다음버튼(true)	
	}
}​

 

◎ BoardController 클래스의 list() 메소드 수정

   ▷ Model에 담아 화면에 전달

   ▷ src/main/java/org/codehows/controller → BoardController 클래스 수정

...(생략)...
	@GetMapping("/list")
	public void list(Criteria cri, Model model) {
		
		log.info("list : " + cri);
		model.addAttribute("list", service.getList(cri));
		model.addAttribute("pageMaker", new PageDTO(cri, 123));		
	}
...(생략)...


▷ PageDTO 클래스에 객체를 만들어 Model에 담아줍니다.
 PageDTO 구성을 위해 전체 데이터 수가 필요한데 아직 지정되지 않아 임의로 123을 지정했습니다.

 

 

3. JSP 페이지 번호 출력

   ▷ JSTL을 통해 페이지 번호를 출력할 수 있음

   ▷ SB Admin2는 부트 스트랩 기반으로 구성되어 있으므로 관련 링크들에 필요한 예제들이 존재

   ▷ SB Admin2의 pages 폴더 → tables.html 페이지의 페이지 처리를 이용해서 구성

 

<div class='pull-right'>
	<ul class="pagination">
                            	
		<c:if test="${pageMaker.prev}">
			<li class="paginate_button previous"><a href="#">Previous</a>
			</li>
			</c:if>  
                            		
			<c:forEach var="num" begin="${pageMaker.startPage}"
			end="${pageMaker.endPage}">
			<li class="paginate_button"><a href="#">${num}</a></li>
			</c:forEach>
                            		
			<c:if test="${pageMaker.next}">
				<li class="paginate_button previous"><a href="#">Next</a></li>
			</c:if>                     		                            		                          	
		</ul>
	</div>


http://localhost:8080/board/list?pageNume=5

위의 주소로 접속하면 아래와 같이 5페이지가 나타납니다.


만약 아래와 같이 페이지 수를 지정해주면 5페이지의 20개가 출력됩니다.

http://localhost:8080/board/list?pageNume=5 & amount=20

 

(1) 페이지 번호 이벤트 처리

   ▷ 페이지 번호를 클릭했을 때 이벤트 처리를 해야함

   ▷ <a> 태그의 href 속성을 이용해도 되지만 직접 링크를 처리하면 검색 조건이 붙고난 후 처리가 복잡해

        JavaScript를 통해서 처리

 

◎ list.jsp 수정

   ▷ 우선 href 이용해서 처리

<div class='pull-right'>
	<ul class="pagination">	
		<c:if test="${pageMaker.prev}">
			<li class="paginate_button previous"><a
				href="${pageMaker.startPage -1}">Previous</a></li>
		</c:if>

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

		<c:if test="${pageMaker.next}">
			<li class="paginate_button next"><a
				href="${pageMaker.endPage + 1}">Next</a></li>
		</c:if>                		                            		                          	
	</ul>
</div>


▷ 이제 화면에서 <a> 태그는 href 속성 값으로 단순히 번호만을 가지게 변경
페이지 번호를 클릭하면 해당 URL이 존재하지 않으므로 문제가 생기게 됩니다.

 

◎ <a> 태그가 원래 동작을 하지 못하도록 JavaScript 처리

   ▷ list.jsp 내용 추가(pull-right div 밑에 추가)

<form id='actionForm' action="/board/list" method='get'>
	<input type='hidden' name='pageNum'	value='${pageMaker.cri.pageNum}'> 
	<input type='hidden' name='amount' value='${pageMaker.cri.amount}'>
</form>


◎ java Script 부분 마지막 부분에 내용 추가

...(생략)...
var actionForm = $("#actionForm");

$(".paginate_button a").on("click", function(e) {
	e.preventDefault();
	console.log('click');
	actionForm.find("input[name='pageNum']").val($(this).attr("href"));
});
...(생략)...


수정 후 페이지 버튼을 누르면 다른 페이지로 넘어가는 것을 확인할 수 있습니다.

http://localhost:8080/board/list

 

화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할 수 있게 처리하는 방법에 대해 배워보았습니다.

 

페이지 번호를 선택하면 해당 페이지의 글들을 출력할 수 있도록 만들 수 있었습니다.

 

다음 글에서도 페이지 번호를 표시하는 것을 해볼게요!!

 

많은 분들의 피드백은 언제나 환영합니다!  많은 댓글 부탁드려요~~

 

728x90
반응형