페이징 처리

1. 페이징에 사용할 Class

public class PagingMaker {
	private int startPage;              //시작 페이지
	private int total;					//게시글 총 갯수
	private int lastPage;				//마지막 페이지
	private int endPage;				//끝 페이지
	private int nowPage = 1;			//현재 페이지
	private int cntPerPage = 5;			//페이지당 글 갯수
	private int cntPage = 5;			//보여질 페이지 갯수
	private int start;				
	private int end;
	
	public PagingMaker() {
		super();
	}

	public PagingMaker(int total, int nowPage, int cntPerPage) {
		setNowPage(nowPage);
		setCntPerPage(cntPerPage);
		setTotal(total);
		calcLastPage(getTotal(), getCntPerPage());
		calcStartEndPage(getNowPage(), cntPage);
		calcStartEnd(getNowPage(), getCntPerPage());
	}

	// 제일 마지막 페이지 계산
	public void calcLastPage(int total, int cntPerPage) {
		setLastPage((int) Math.ceil((double) total / (double) cntPerPage));
	}

	// 시작, 끝 페이지 계산
	public void calcStartEndPage(int nowPage, int cntPage) {
		setEndPage(((int) Math.ceil((double) nowPage / (double) cntPage)) * cntPage);
		if (getLastPage() < getEndPage()) {
			setEndPage(getLastPage());
		}
		setStartPage(getEndPage() - cntPage + 1);
		if (getStartPage() < 1) {
			setStartPage(1);
		}
	}

	// DB 쿼리에서 사용할 start, end값 계산
	public void calcStartEnd(int nowPage, int cntPerPage) {
		setEnd(nowPage * cntPerPage);
		setStart(getEnd() - cntPerPage + 1);

	... getter, setter ....
}

 

2. 페이징이 필요한 Vo에 PageMaker를 상속받음

public class FreeBoardVo extends PageMaker {
...
}

 

3. 컨트롤러

@RequestMapping("/main.ino")
public ModelAndView main(HttpServletRequest request, FreeBoardDto dto) {
	ModelAndView mav = new ModelAndView();
	
    int totalCount = freeBoardService.freeBoardListCount(dto);
	
    PagingMaker pagingMaker = new PagingMaker(totalCount, dto.getNowPage(), 5);
    dto.setStart(pagingMaker.getStart());
	dto.setEnd(pagingMaker.getEnd());
    
    List<FreeBoardDto> list = freeBoardService.freeBoardList(dto);
	
    mav.setViewName("boardMain");
	mav.addObject("freeBoardList", list);
	mav.addObject("dto", dto);
	mav.addObject("paging", pagingMaker);
	return mav;
}

 

4. 뷰에 보여질 페이징 부분

<div style="display: block; text-align: center;">		
	<a href="#" onclick="onPage(1)">처음으로</a>
	<c:if test="${paging.nowPage > 1 }">
		<a href="#" onclick="onPage(${paging.nowPage - 1})">&lt;</a>
	</c:if>
	<c:forEach begin="${paging.startPage }" end="${paging.endPage}" var="p">
        <c:choose>
            <c:when test="${p == paging.nowPage }">
                <b>${p}</b>
            </c:when>
            <c:when test="${p != paging.nowPage }">
                <a href="#" onclick="onPage(${p})">${p}</a>
            </c:when>
        </c:choose>
	</c:forEach>
	<c:if test="${paging.nowPage < paging.lastPage}">
		<a href="#" onclick="onPage(${paging.nowPage + 1})">&gt;</a>
	</c:if>
	<a href="#" onclick="onPage(${paging.lastPage})">끝</a>
</div>

 

5. submit용 function

function onPage(page) {
	console.log(page)
	var nowPage = document.querySelector('input[name="nowPage"]');
	nowPage.value = page;
	document.getElementById('searchForm').submit();
}

function onSearch(e) {
	e.preventDefault();
	document.getElementById('searchForm').submit();
}