차근차근/Spring

스프링, 오라클, 페이징, 페이지네이션,마이바티스

예쁜꽃이피었으면 2023. 3. 17. 12:18

1. 공통으로 사용될 페이지네이션 DTO

public class PaginationDto {

	
	private int listSize = 10; //초기값으로 목록개수를 10으로 설정
	private int rangeSize = 10; //초기값으로 페이지 범위를 10으로 설정
	private int page; //현재페이지 (현재 목록의 페이지 번호)
	private int range; //현재 페이지 범위 (각 페이지 범위 시작 번호)
	private int listCnt; //총 게시물의 개수
	private int pageCnt; //총 페이지 범위의 개수
	private int startPage;// 총 페이지 범위의 개수
	private int statList; //한 페이지 목록의 개수 (한 페이지 당 보여질 리스트의 개수, 게시판 시작번호)
	private int endPage; 
	private boolean prev;
	private boolean next;
	
	
	public int getListSize() {
		return listSize;
	}
	public void setListSize(int listSize) {
		this.listSize = listSize;
	}
	public int getRangeSize() {
		return rangeSize;
	}
	public void setRangeSize(int rangeSize) {
		this.rangeSize = rangeSize;
	}
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getRange() {
		return range;
	}
	public void setRange(int range) {
		this.range = range;
	}
	public int getListCnt() {
		return listCnt;
	}
	public void setListCnt(int listCnt) {
		this.listCnt = listCnt;
	}
	public int getStartPage() {
		return startPage;
	}
	public void setStartPage(int startPage) {
		this.startPage = startPage;
	}
	public int getStatList() {
		return statList;
	}
	public void setStatList(int statList) {
		this.statList = statList;
	}
	public int getEndPage() {
		return endPage;
	}
	public void setEndPage(int endPage) {
		this.endPage = endPage;
	}
	public boolean isPrev() {
		return prev;
	}
	public void setPrev(boolean prev) {
		this.prev = prev;
	}
	public boolean isNext() {
		return next;
	}
	public void setNext(boolean next) {
		this.next = next;
	}
	
	public int getPageCnt() {
		return pageCnt;
	}
	public void setPageCnt(int pageCnt) {
		this.pageCnt = pageCnt;
	}
	

	//page:현재 페이지 정보 / range:현재 페이지 범위 정보 / listCnt:게시물의 총 개수  
	public void pageInfo(int page, int range, int listCnt) { 
		this.page = page;
		this.range = range;
		this.listCnt = listCnt;
		
		
		//전체 페이지수
		this.pageCnt = (int)Math.ceil(listCnt/listSize);
		this.pageCnt = (int) Math.ceil((double)listCnt/listSize);
		
		//시작 페이지
		this.startPage = (range -1) * rangeSize +1;
		
		//끝 페이지
		this.endPage = range * rangeSize;
		
		//게시판 시작 번호
		this.statList = (page-1) * listSize;
		this.statList = (page-1) * listSize+1;
		
		//이전버튼 상태
		this.prev = range == 1 ? false : true;
		
		//다음버튼 상태
		//this.next = endPage > pageCnt ? false : true;
		this.next = pageCnt > endPage ? true : false;
		if(this.endPage > this.pageCnt) {
			this.endPage = this.pageCnt;
			this.next = false;
		}
		
	}
	@Override
	public String toString() {
		return "PaginationDto [listSize=" + listSize + ", rangeSize=" + rangeSize + ", page=" + page + ", range="
				+ range + ", listCnt=" + listCnt + ", pageCnt=" + pageCnt + ", startPage=" + startPage + ", statList="
				+ statList + ", endPage=" + endPage + ", prev=" + prev + ", next=" + next + "]";
	}
	



}

 

2. 게시판 목록을 불러오는 컨트롤러에 추가

1) page와 range 기본값 세팅 (컨트롤러 호출 시 page와 range값이 없으면 1이 들어감)

@RequestMapping(value = "/getBoardList", method = RequestMethod.GET)
	public String getBoardList(Model model
			, @RequestParam(required = false, defaultValue = "1") int page
			, @RequestParam(required = false, defaultValue = "1") int range
			) throws Exception {

	...
    //전체 게시글 개수
	int listCnt = boardService.getBoardListCnt();

    //Pagination 객체생성
	Pagination pagination = new Pagination();
	pagination.pageInfo(page, range, listCnt);

	model.addAttribute("pagination", pagination);
	model.addAttribute("boardList", boardService.getBoardList(pagination));
	return "board/index";
  
    }

3. jsp

		<div class="cntPaging" id="listPage" >
			
			<a class="prev" href="#" onclick="fn_pagination('1','${pagination.range}','${pagination.rangeSize}')"> 첫 페이지 </a>
			
			
			<c:if test="${pagination.prev}">
				<a class="prev" href="#" onclick="fn_prev('${pagination.page}','${pagination.range}','${pagination.rangeSize}')"> 이전 페이지 </a>
			</c:if>
			
	        <div class="">
	        	<c:forEach begin="${pagination.startPage}" end="${pagination.endPage}" var="index">
	        		<c:if test="${pagination.page == index }">
	        			<strong>${index}</strong>
	        		</c:if>
	        		<c:if test="${pagination.page != index }">
		        		<a href="#" onclick="fn_pagination('${index}','${pagination.range}','${pagination.rangeSize}')">${index}</a>
	        		</c:if>
	        	</c:forEach>
	        </div>
	        
	        <c:if test="${pagination.next}">
				<a class="next" href="#" onclick="fn_next('${pagination.page}','${pagination.range}','${pagination.rangeSize}')"> 다음 페이지 </a>
			</c:if>
			
			<a class="next" href="#" onclick="fn_pagination('${pagination.endPage}','${pagination.range}','${pagination.rangeSize}')"> 마지막 페이지 </a>
			
		</div>

 

4. js

function fn_prev(page,range,rangeSize){
	var page=((range-2)*rangeSize)+1;
	var range = range -1;

	var url="/board/index";
	url += "?page="+page;
	url += "&range="+range;
	
	location.href=url;
}

function fn_pagination(page,range,rangeSize){
	var url="/board/index";
	url += "?page="+page;
	url += "&range="+range;
	
	location.href=url;
}

function fn_next(page,range,rangeSize){
	var page=parseInt((range * rangeSize))+1;
    var range=parseInt(range)+1;
	
	var url="/board/index";
	url += "?page="+page;
	url += "&range="+range;
	
	location.href=url;
}

5. 쿼리

runm은 1,2,3,4, .. 이렇게 보여지는데

jsp에 출력할때는 99,98,97.. 이렇게 역순으로 보여지게 하려고 test_ROWNUM 추가

		SELECT RNUM , test_ROWNUM
		       , test.*
		  FROM (            
		          SELECT ROWNUM AS RNUM ,  #{test_total}-(ROWNUM-1) AS test_ROWNUM
		                 , test.*
		          FROM (
				
						//목록에 보여줘야 하는 내용작성 	    
						select *
						from test						
	
	                )
	              WHERE ROWNUM <![CDATA[<=]]> #{startList}+#{listSize}
				 )
		   WHERE RNUM <![CDATA[>]]> #{startList}

 

6. 

검색조건도 js에서 넘길 때 같이 보내야 한다.

 

https://freehoon.tistory.com/112

 

Spring 블로그 만들기 - 9. 페이징(pagination)

이 포스팅의 샘플 게시판 개발 환경은 MAC OS, STS, OpenJDK11 입니다. 페이징 처리에 대한 포스팅은 아래와 같은 순서로 진행합니다.페이징 테스트를 위한 데이터 만들기Pagination 클래스 만들기게시판

freehoon.tistory.com

https://velog.io/@tjddnths0223/%ED%8E%98%EC%9D%B4%EC%A7%95-%EC%B2%98%EB%A6%AC

 

[스프링] 페이징(검색) + 오라클(Mybatis)

게시글이 많아지면 스크롤이 길어지고 그만큼 서버에서 읽어와야할 데이터의 양도 많아짐. 로딩도 길어지고 가독성도 떨어지는데 이를 해결하기 위해 한 번에 보여줄 데이터를 적당히 출력하

velog.io

 

반응형