[Java/Spring] 페이징 구현하기

일일업무보고 게시판(crud) 에 페이징을 한번 구현해보았습니다.

원래 그리드에 있는것만 써왔었는데 이번 기회에 직접 처음부터 구현해보게 되었습니다.

 

• jsp 

<ul class="pagination">
		 <c:if test="${currPage ne 1}">
		  	<li><a href='/reportList.do?currPage=1'>처음</a></li>
		 	<li><a href='/reportList.do?currPage=${prevPage} '>이전</a></li>
		 </c:if>
		<c:forEach var="i" varStatus="status" begin="${startPage}" end="${endPage}" step="1">
			<c:if test="${currPage eq i}">
				<li class="active"><a href='/reportList.do?currPage=${i}'>${i}</a></li>
			</c:if>
			<c:if test="${currPage ne i}">
				<li><a href='/reportList.do?currPage=${i}'>${i}</a></li>
			</c:if>
		</c:forEach>
		<c:if test="${maxPage ne currPage}">
			<li><a href='/reportList.do?currPage=${nextPage}'>다음</a></li>
			<li><a href='/reportList.do?currPage=${maxPage}'>마지막</a></li>
		</c:if>
	</ul>

페이지네이션 부분입니다.

처음과 이전버튼은 현재페이지(currPage)가 가장 처음일경우에는 사라지게 해두었고
다음과 마지막버튼 또한 현재페이지(currPage)가 가장 마지막일 경우에 사라지게 해두었습니다.

 

• VO

  @Data
  @Alias("pageVO")
  public class PageVO {
  	
  	//페이징 번호시작
  	private int firstPage = 1;
  	//현재페이지
  	private int currPage;
  	//전체에서 마지막 페이지
  	private int maxPage;
  	//보여질 게시글 수
  	private int pageSize = 10;
  	
  	
  	//블럭 시작페이지
  	private int startPage;
  	//블럭 종료페이지
  	private int endPage;
  	//총 블럭수
  	private int totalBlock;
  	//보여질 버튼갯수
  	private int blockSize = 5;
  	//record 
  	private int startRow = 0;
   }

   

- 필수로 있어야하는 필드들입니다.

 

 

• Controller

/**
	 * 업무보고리스트
	 * @param reportVO
	 * @param request
	 * @return
	 * @throws Exception
	 */
	@RequestMapping(value="/reportList.do")
	public ModelAndView reportList(@ModelAttribute ReportVO reportVO, HttpServletRequest request) throws Exception {
		ModelAndView mv = new ModelAndView("");
		String id = "systemId";
		reportVO.setRegId(id);
		//총 글 갯수
		int totalRowCnt = reportService.selectCntReportList(reportVO);
		//한 페이지에 보여질 글갯수 
		int pageSize = reportVO.getPageSize();
		//블럭 시작페이지
		int startPage = reportVO.getStartPage();
		//보여질 버튼갯수
		int blockSize = reportVO.getBlockSize();
		//총 버튼 갯수
		int totalBlock = reportVO.getTotalBlock();
		//전체에서 마지막 페이지
		int maxPage = reportVO.getMaxPage();
		//현재페이지
		int currPage = reportVO.getCurrPage();
		//총 페이지수
		int pageCount = (int) Math.ceil(totalRowCnt / pageSize);
		//블럭 종료페이지
        //int endPage = startPage + blockSize-1;
        //int endPage = blockSize * currPage;
		/*
	     * startPage
         * 1. ( 클릭한 페이징 번호 / 페이지 버튼 수) => 실수형이 나오고, + 0.9
         * => ex) 5 / 10 = 0.5,
         * =>       0.5 + 0.9 = 1.4,
         * =>      (int)1.4 = 1,
         * =>      1 - 1 = 0,
         * =>      0 * 10 = 0,
         * =>      0 + 1 = 1;
         * 이로써, 5를 눌러도 1 ~ 10까지의 페이징이 표시된다. 5 ~ 14가 아니다. 
         */
        startPage = (((int)((double)currPage / blockSize + 0.9)) - 1) * blockSize + 1;
        /*
         * maxPage :
         * 1. (총 게시글 수 / 한 페이지 게시글 수) => 실수형이 나오고, + 0.9
         * => ex) 26 / 10 = 2.6, 
         * =>     2.6 + 0.9 = 3.5
         * =>     (int)3.5 = 3
         *       총 페이지 = 1 2 3
         */
	    maxPage = (int)((double)totalRowCnt / pageSize + 0.9);
	    
	    int endPage = maxPage;
	    //endPage 가공.
	    if (endPage > startPage + blockSize - 1) endPage = startPage + blockSize - 1;
	    
        int nextPage = currPage +1;
        int prevPage = currPage -1;
        // 만약 페이징이 13까지 있다면, 20까지 표시되는 것이 아니라 13까지만 표시된다.
        if(maxPage < endPage) {
        	endPage = maxPage;
        }
        mv.addObject("prevPage", prevPage);
        mv.addObject("nextPage", nextPage);
		mv.addObject("totalRowCnt", totalRowCnt);
		mv.addObject("startPage", startPage);
		mv.addObject("pageCount", pageCount);
		mv.addObject("endPage", endPage);
		mv.addObject("maxPage", maxPage);
		mv.addObject("blockSize", blockSize);
		mv.addObject("currPage", currPage);
		mv.addObject("totalBlock", totalBlock);
		
		//startRow를 
		reportVO.setStartRow((reportVO.getCurrPage() - 1) *  reportVO.getPageSize());
		System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"+reportVO.getStartRow());
		mv.addObject("reportList", reportService.selectPageReportList(reportVO));
		mv.setViewName("/front/frontReportList");
		System.out.println(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>"+reportVO);
		return mv;
	}

필수 필드들로 계산한 과정의 서버단입니다.

 

reportVO.setStartRow((reportVO.getCurrPage() - 1) *  reportVO.getPageSize());    <--- 이 부분에 의하여 페이징번호 2를 클릭하였을때 #{startRow} = 10이 되고 #{pageSize}는 10!

 

파라미터는 vo로 받아서 가공한 뒤 mv에 담아서 뷰로 넘기기!

복붙했더니 줄이 엉망이네용 ㅠ

급히 하느라고 코드는 지저분하고 엉망입니다 ㅠㅠ

나중에 리팩토링할 실력이 되면 깔끔한 코드로 페이징한번 다시 해보려구요 ㅎㅎ!

 

 

DB 와 SQL 작성 부분은 아래 링크와 연결되어 있습니다 ㅎㅎ!

2021.10.28 - [Back End/SQL] - [MyBatis/MariaDB] 페이징 구현하기

[MyBatis/MariaDB] 페이징 구현하기

페이징까지 완료 된 뷰 화면

1번 클릭 시 이전버튼과 처음버튼 사라짐

가장마지막 페이징번호 클릭 시 다음과 마지막 버튼 사라짐

요로코롬 페이징을 구현해보았습니다.

 

리팩토링이나 피드백이 있을 경우 댓글 달아주시면 감사하겠습니다^_^