[프로젝트] 페이징 기법

Spring MVC에서 지원하는 방법으로 페이지를 구현하자.

 

option.properties에 값을 먼저 세팅하자.

#page당 글의 개수
page.listcnt = 10
#하단 page 번호 버튼의 개수 
page.paginationcnt = 10

boardController의 main을 수정한다.

page라는 변수를 통해 특정 페이지의 글 목록을 보여줄 것이다.

	@GetMapping("/board/main")
	public String main(@RequestParam("board_info_idx") int board_info_idx, 
						@RequestParam(value="page", defaultValue="1") int page,
						Model model) {
		model.addAttribute("board_info_idx",board_info_idx);
		
		String board_info_name = boardService.getBoardName(board_info_idx);
		model.addAttribute("board_info_name",board_info_name);
		
		List<ContentBean> list = boardService.getContentList(board_info_idx, page);
		model.addAttribute("contentList", list);
		
		return "board/main";
	}

boardService,Dao,Mapper를 수정한다.

여기서 RowBounds라는 클래스는 ibatis에서 지원하는 클래스로, 특정 범위를 설정하는 클래스이다.

여기선 start부터 10개의 글을 가져오는 것을 뜻한다.

	public List<ContentBean> getContentList(int board_info_idx, int page){
		
		int start = (page-1) * page_listcnt;
		// start부터 page_listcnt개수만큼 범위 설정
		RowBounds rowBounds = new RowBounds(start,page_listcnt); 
		
		return boardDao.getContentList(board_info_idx, rowBounds);
	}

실행해보면 아래와 같이 10개의 글이 잘 보이는 것을 알 수 있다.

구현하기 전에는 모든 글이 한 페이지에서 보였었다.

---

이제 하단의 페이지 버튼과 이전, 다음 버튼을 세팅하자.

우선 page를 관리할 pageBean을 생성한다.

public class PageBean {
	
	//최소, 최대 페이지의 번호
	private int min;
	private int max;
	
	//이전, 다음 버튼을 누르면 이동할 페이지 번호
	private int prevPage;
	private int nextPage;
	
	//전체 페이지 개수
	private int pageCnt;
	//현재 페이지 번호
	private int currentPage;
	
	//contentCnt : 전체 글 개수, contentPageCnt : 페이지 당 글의 개수, paginationCnt : 하단 페이지 버튼의 개수
	public PageBean(int contentCnt, int currentPage, int contentPageCnt, int paginationCnt) {
		
		this.currentPage = currentPage;
		
		//전체 페이지 개수
		pageCnt = contentCnt / contentPageCnt;
		if(contentCnt % contentPageCnt > 0)
			pageCnt++;
		
		min = ((currentPage-1) / contentPageCnt)*contentPageCnt + 1;
		max = min + paginationCnt - 1;
		
		if(max > pageCnt) 
			max = pageCnt;
		
		prevPage = min - 1;
		nextPage = max + 1;
		if(nextPage > pageCnt)
			nextPage = pageCnt;
		
	}

boardMapper에서 해당 게시판의 전체 페이지 개수를 구하는 쿼리를 작성하자.

	@Select("select count(*) " + 
			"from content_table " + 
			"where content_board_idx=${content_board_idx}")
	int getContentCnt(int content_board_idx);

boardDao와 boardService를 작성한다. 

boardService는 전체 글의 개수를 구한 후 페이지빈을 세팅, 반환한다.

	public PageBean getContentCnt(int content_board_idx, int currentPage) {
		int content_cnt = boardDao.getContentCnt(content_board_idx);
		PageBean pageBean = new PageBean(content_cnt, currentPage, page_listcnt, page_paginationcnt);
		return pageBean;
	}

Controller의 main의 최종 코드이다. boardService를 호출한 후 pageBean을 model로 전달한다.

	@GetMapping("/board/main")
	public String main(@RequestParam("board_info_idx") int board_info_idx, 
						@RequestParam(value="page", defaultValue="1") int page,
						Model model) {
		model.addAttribute("board_info_idx",board_info_idx);
		
		String board_info_name = boardService.getBoardName(board_info_idx);
		model.addAttribute("board_info_name",board_info_name);
		
		List<ContentBean> list = boardService.getContentList(board_info_idx, page);
		model.addAttribute("contentList", list);
		
		PageBean pageBean = boardService.getContentCnt(board_info_idx, page);
		model.addAttribute("pageBean", pageBean);
		
		return "board/main";
	}

 

마지막 board/main.jsp의 하단 페이지 부분이다.

                    <div class="d-none d-md-block">
                        <ul class="pagination justify-content-center">
                        	<c:choose>
                        		<c:when test="${pageBean.prevPage <= 0 }">
		                            <li class="page-item disabled">
		                                <a href="#" class="page-link">이전</a>
		                            </li>                        		
                        		</c:when>
                        		<c:otherwise>
		                            <li class="page-item">
		                                <a href="${root }board/main?board_info_idx=${board_info_idx}&page=${pageBean.prevPage}" class="page-link">이전</a>
		                            </li>                        		
                        		</c:otherwise>
                        	</c:choose>
                        	
                        	<c:forEach var='idx' begin="${pageBean.min }" end="${pageBean.max }">
                        		<c:choose>
                        			<c:when test="${idx==pageBean.currentPage }">
	                        			<li class="page-item active">
		                                	<a href="${root }board/main?board_info_idx=${board_info_idx}&page=${idx}" class="page-link">${idx}</a>
		                          		</li>
                        			</c:when>
                        			<c:otherwise>
                        				<li class="page-item">
	                               			<a href="${root }board/main?board_info_idx=${board_info_idx}&page=${idx}" class="page-link">${idx}</a>
	                            		</li>
                        			</c:otherwise>
                        		</c:choose>
	                        </c:forEach>
	                        
                        	<c:choose>
                        		<c:when test="${pageBean.max >= pageBean.pageCnt }">
		                            <li class="page-item disabled">
		                                <a href="#" class="page-link">다음</a>
		                            </li>                        		
                        		</c:when>
                        		<c:otherwise>
		                            <li class="page-item">
		                                <a href="${root }board/main?board_info_idx=${board_info_idx}&page=${pageBean.nextPage}" class="page-link">다음</a>
		                            </li>                        		
                        		</c:otherwise>
                        	</c:choose>
                        </ul>
                    </div>

 

결과물이다. 제일 끝 페이지에 있을 땐 다음 버튼이 비활성화 된다.

마찬가지로 제일 앞 페이지에서도 이전 버튼이 비활성화 된다.

---

이제 글을 읽고 목록보기를 눌렀을 때에도 해당 페이지의 글 목록이 뜨도록 수정하겠다.

board controller의 main과 read, update, update_pro에서 page를 model을 통해 전달한다.

read와 update_pro는 @RequestParam을 통해 page를 받아온 후 다시 전달한다.

그 후 main, read, update ,update_success의 링크에 &page=${page}를 추가해준다.

이제 수정완료, 취소, 목록보기 등을 눌러도 이전의 페이지를 보여주는 것을 알 수 있다.