[페이징 처리 4] 페이징 화면 처리

화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할 수 이게 처리한다.

페이지 처리는 단순 링크 연결이기 때문에 어렵지 않지만, 페이지에서 조회 페이지, 수정, 삭제 페이지까지 페이지 번호가 계속해서 유지되어야 하기 때문에 신경 써야 하는 부분들이 많다.

 

 

페이징 처리할 때 필요한 정보

- 현재 페이지 번호(page)

- 이전, 다음으로 이동 가능한 링크 표시 (prev, next)

- 화면에서 보여지는 페이지의 시작 번호와 끝 번호(startPage, endPage)

 

 

시작(startPage)과 끝 페이지(endPage) 번호

 페이징 처리에서 우선적으로 필요한 정보는 현재 사용자가 보고 있는 페이지(page) 정보이다.

 

가령 페이지 표시가 10개씩 표기한다. 라고 가정 했을 때, 사용자가 5페이지를 보고 있다면 나열된 페이지 번호 중 가장 첫 번호는 1이고 마지막 페이지 번호는 10일 것이다. (아래 그림 참조)

그림1.

 

사용자가 19 페이지를 보고 있다면 나열된 페이지 번호 중 가장 첫 번호는 11 페이지이고 마지막 페이지 번호는 20일 것이다. (아래 그림 참조)

그림2.

* 페이지를 시작 번호 보다 끝 번호를 먼저 계산해 두는 것이 수월하다.

 

▷ 페이징 끝번호(endPage) 계산

    endPage는 현재 화면의 끝 페이지 번호이다.

this.endPage = (int)(Math.ceil(페이지번호 / 10.0)) * 10;

- Math.ceil 은 소수점 이하를 올림 처리

   1페이지 경우 : Math.ceil(0.1)*10 = 10

 10페이지 경우 : Math.ceil(1)*10 = 10

 11페이지 경우 : Math.ceil(1.1)*10 = 20 (올림처리 발생)

 

 

만약 화면에 페이지번호를 그림1,2 와 같이 10개씩 표기한다면 시작번호는 무조건 끝 번호에서 9를 뺀 값이 된다.

this.startPage = this.endPage - 9;

 

끝 번호(endPage)는 전체 데이터수(total)에 의해 영향을 받는다. 예를 들어 1페이지당 게시글을 10개씩(amount) 보여주는 경우 전체 데이터 수 (total)가 80개라고 가정하면 끝 번호(endPage)는 10이 아닌 8이 되어야만 한다.

 

▷ 실제 끝페이지 번호 (realEnd) 구하는 방법

    realEnd 페이지는 총 페이지의 마지막 페이지 번호이고 endPage는 현재 화면에서의 마지막 페이지번호이다.

    (헛갈리지 말것!)

 realEnd = (int)(Math.ceil( (total*1.0) / amount) );

 if(realEnd < this.endPage) {
	this.endPage = realEnd;
   }

-  realEnd  : 실제 총 데이터(total) / 페이지당 데이터(amount) 로 나눈 계산한 실제 끝페이지 번호

 

 

▷ 이전(prev)과 다음(next)

 

이전의 경우 시작 번호(startPage)가 1보다 큰 경우라면 존재한다.

this.prev = this.startPage > 1 ;

 

다음(next) 는 realEnd 가 끝 번호(endPage)보다 큰 경우에만 존재한다.

this.next = this.endPage < realEnd ;

- realEnd 는 총 페이지의 마지막 페이지 번호이고 화면의 끝 번호인 endPage 보다 커야 다음 페이지가 존재 할 수 있기 때문이다.

ex)

realEnd = 8 , endPage = 10

endPage > realEnd : 다음 페이지 버튼 or 링크 (next) 가 존재 할 수 없다.

 

realEnd = 11 , endPage = 10

endPage < realEnd : 다음 페이지 버튼 or 링크 (next) 가 반드시 존재해야한다.

 

 

 

 

 

* 출처: 코드로 배우는 스프링 웹프로젝트 <남가람 북스>