Spring 이론(응용) - ORACLE 페이징처리

페이징 화면처리

사용자가 페이지 번호를 클릭할 수 있게 처리합시다. 즉 1페이지 2페이지 3페이지.... 

 

페이징 처리시 필요한 정보

• 현재 페이지 번호(page)
• 이전과 다음으로 이동 가능한 링크의 표시 여부(prev,next)
• 화면에서 보여지는 페이지의 시작번호와 끝 번호(startPage,endPage)

startPage, endPage

사용자가 5페이지 본다면 화면의 페이지 번호는 1페이지 부터 보여지지만 19 페이지를 본다면 11페이지부터 보여집니다.

ex) 1 2 3 4 5 6 7 8 9 10 

ex) 11 12 13 14 15 16 17 18 19 20

 

페이지의 끝번호 부터 계산하는 것이 더 편리합니다.

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

• 1page => Math.ceil(0.1)*10 = 10
• 10page => Math.ceil(1)*10 = 10
• 11page => Math.ceil(1.1)*10= 20

끝번호가 9까지 일수도 있기때문에 개선의 여지가 있습니다. 끝 번호는 총 게시글 수의 영향을 받기 때문입니다.

예를 들어서 80개의 글이 있으면 끝번호는 8입니다. 즉 끝 번호와 한페이지 게시글 수 를 곱해서 전체 글 개수보다 크면 총 개수로 다시 계산해야합니다.

끝번호 다시 계산
realEnd = (int)(Math.ceil((total*1.0)/amount));
if(realEnd < this.endPage){
	this.endPage = realEnd;
}

 

그러나 끝번호를 먼저 구하면 시작번호는 9를 빼주면 됩니다.

시작페이지
this.startPage = this.endPage -9;

 

Prev, Next

prev(<)의 경우 시작 페이지 번호가 1보다 크면 무조건 이전 페이지가 존재하므로 prev가 true입니다.

prev 계산
this.prev = this.startPage > 1;

next(>)의 경우 realEnd가 끝 번호보다 큰 경우에만 존재합니다.

next 계산
this.next = this.endPage < realEnd;

이로써 준비는 끝나고 페이지네이션 처리를 위해 PageDTO라는 클래스를 설계합니다.

 

PageDTO 설계

@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;
        this.next = this.endPage < realEnd;
        
    }
 }

여기서 Criteria는 pageNum과 amount가 들어있습니다.

 

이를 jsp에 model에 담아서 보내주면 사용할 수 있습니다.

model.addAttribute("pageMaker",new PageDTO(cri,123));

pageMaker를 받은 list.jsp에서는 다음과 같이 작성합니다.

<ul class="pagination">
		
        <!-- href값을 페이지 번호로 대체하여 이를 자바스크립트에서 href값을 통해 form 태그 내 input hidden에 값을 대체하여 form으로 submit -->
		<c:if test="${pageMaker.prev}">
			<li class="paginate_button previous"><a href="${pageMaker.startPage-1}">이전</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}">다음</a>
            </li>
		</c:if>

</ul>

<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>

이를 자바스크립트에서 링크를 누르면 이동하도록 해줍니다.

 

var actionForm = $("#acionForm");

$(".pagination_button a").on("click",function(e){

	e.preventDefault();
    actionForm.find("input[name='pageNum']").val($(this).attr("href"));
    actionForm.submit();
});

form이 작동해서 아래 리스트 컨트롤러에서 작동하게됩니다.

// 게시글 목록 조회 /board/list 경로
	@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));
		int total = service.getTotal(cri);
		System.out.println("total count: " + total);
		model.addAttribute("pageMaker", new PageDTO(cri, total));
	}