페이징 구현 방법

Jay_u·2023년 8월 1일
0

프로젝트

목록 보기
1/5

웹 개발 곳곳에서 필요한 페이지네이션 구현 방법에 대해서 알아보자

공식처럼 기억하자

필요한 변수
1. totalCnt 총 게시글 수
2. sizePerPage 한 페이지당 보여줄 게시물 건수
3. currentShowPageNo 현재 페이지 번호
4. totalPage 전체 페이지
5. startRno 시작 글번호
6. endRno 끝 글번호

시작과 끝 글번호란 1~10, 11~20, 21~30 처럼 한 페이지 내에 시작과 끝 번호를 의미한다.

방법
1. 총 게시글 수를 구해온다.
2. 총 게시글 수 / 한 페이지당 보여줄 게시물 건 수
그러면 뭐가 나올까? 바로 페이지 수가 나온다. Math.ceil을 활용해 반올림해주자. ex) 56/10 = 5.6 반올림 하면 6

  1. 현재 페이지 번호가 null이라면 1로 보내주고
    null이 아니라면 파라미터로 받은 페이지 번호를 활용해 시작글번호를 구한다.

  2. 시작 글 번호 구하는 법
    (현재 페이지 번호 - 1 * 한 페이지 게시물 수 ) + 1

  3. 끝 글 번호 구하는법
    시작글번호 + 페이지당 글 수 - 1

  4. orcle의 경우 row_number() over(order by 칼럼 desc) 를 활용해 게시글을 가져온다.

select seq, name, subject, date 
from 
(
select row_number() over(order by seq desc) AS rno,
       seq, fk_userid, name, subject, readCount,
       to_char(regDate, 'yyyy-mm-dd') AS regDate, 
       commentCount
from board
) V 
where rno between 시작글번호 and 끝 글번호;
  1. 페이지바 만들기
    블록 사이즈를 정하자 -> 1 2 3 4 5 면 5개

  2. 첫 페이지 번호 = (현재 페이지 번호 - 1 / 블록사이즈) * 블록사이즈 + 1

1 2 3 4 5 ((1-1)/5) 5 + 1 = 1
6 7 8 9 10 ((6-1)/5)
5 + 1 = 6

코드-------------

int totalWritingCnt = 0;
int sizePerPage = 10;
int currentPage = 0;
int totalPage = 0;
int startWritingRno = 0;
int endWritingRno = 0;

totalWritingCnt = db에서 가져오자
totalPage = (int)Math.ceil((double)totalCount/sizePerPage);

if(파라미터 pageNo == null) {
	currentPage = 1;
} else {
	try {
    	currentPage = Integer.parseInt(파라미터 pageNo)
    catch () {
    알아서 예외처리
    }
    
    startRno = ((currentShowPageNo - 1) * sizePerPage) + 1;
	endRno = startRno + sizePerPage - 1;
    
    위에 두 개를 들고 db에서 글 list 가져오기
    
    // 페이지 바 만들기
    int blockSize = 10;
    int loop = 1;
    int pageNo = ((currentShowPageNo - 1)/blockSize) * blockSize + 1;
    
    String pageBar = "<ul style='list-style: none;'>";
		String url = "list.action";
		
		// === [맨처음][이전] 만들기 === //
		if(pageNo != 1) {
			pageBar += "<li style='display:inline-block; width:70px; font-size:12pt;'><a href='"+url+"?searchType="+searchType+"&searchWord="+searchWord+"&currentShowPageNo=1'>[맨처음]</a></li>";
			pageBar += "<li style='display:inline-block; width:50px; font-size:12pt;'><a href='"+url+"?searchType="+searchType+"&searchWord="+searchWord+"&currentShowPageNo="+(pageNo-1)+"'>[이전]</a></li>";
		}
		
		while( !(loop > blockSize || pageNo > totalPage) ) {
			
			if(pageNo == currentShowPageNo) {
				pageBar += "<li style='display:inline-block; width:30px; font-size:12pt; border:solid 1px gray; color:red; padding:2px 4px;'>"+pageNo+"</li>";  
			}
			else {
				pageBar += "<li style='display:inline-block; width:30px; font-size:12pt;'><a href='"+url+"?searchType="+searchType+"&searchWord="+searchWord+"&currentShowPageNo="+pageNo+"'>"+pageNo+"</a></li>"; 
			}
			
			loop++;
			pageNo++;
			
		}// end of while-----------------------
		
		
		// === [다음][마지막] 만들기 === //
		if( pageNo <= totalPage ) {
			pageBar += "<li style='display:inline-block; width:50px; font-size:12pt;'><a href='"+url+"?searchType="+searchType+"&searchWord="+searchWord+"&currentShowPageNo="+pageNo+"'>[다음]</a></li>";
			pageBar += "<li style='display:inline-block; width:70px; font-size:12pt;'><a href='"+url+"?searchType="+searchType+"&searchWord="+searchWord+"&currentShowPageNo="+totalPage+"'>[마지막]</a></li>"; 
		}
		
		pageBar += "</ul>";
	
}




profile
정확한 정보를 전달할려고 노력합니다.

0개의 댓글