Part 14. 페이징 화면 처리

• URL의 파라미터를 이용해 정상적으로 원하는 페이지로 이동하는 것을 확인했다면, 화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할 수 있게 처리한다.
• 페이지를 보여주는 작업은 다음과 같은 과정을 통해 진행한다.
  • 브라우저 주소창에서 페이지 번호를 전달해 결과를 확인하는 단계
  • JSP에서 페이지 번호를 출력하는 단계
  • 각 페이지 번호에 클릭 이벤트 처리
  • 전체 데이터 개수를 반영해서 페이지 번호 조절

• 페이지 처리는 단순히 링크의 연결이기 때문에 어렵지는 않지만, 다음 그림과 같이 목록 페이지에서 조회 페이지, 수정 삭제 페이지까지 페이지 번호가 계속해서 유지되어야만 하기 때문에 끝까지 신경 써야 하는 부분들이 많다.
• 다음 그림은 페이지 번호가 어떤 작업을 하던 유지되면서 링크가 연결되는 모습이다.
  

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

• 화면에 페이징 처리를 하기 위해서는 우선적으로 여러 가지 필요한 정보들이 존재한다,
• 화면에 페이지는 크게 다음과 같은 정보들이 필요하다.
  • 현재 페이지 번호(page)
  • 이전과 다음으로 이동 가능한 링크의 표시 여부(prev, next)
  • 화면에서 보여지는 페이지의 시작 번호와 끝 번호(startPage, endPage)

14.1.1 끝 페이지 번호와 시작 페이지 번호

• 페이징 처리를 하기 위해 우선적으로 필요한 정보는 현재 사용자가 보고 있는 페이지의 정보다.
• 예를 들어, 사용자가 5페이지를 본다면 화면의 페이지 번호는 1부터 시작하지만, 사용자가 19페이지를 본다면 11부터 시작해야 하기 때문이다.(화면에 10개씩 페이지 번호를 출력한다고 가정한다면)

• 흔히 페이지를 계산할 때 시작 번호를 먼저 하려고 하지만, 오히려 끝 번호를 먼저 계산해 두는 것이 수월하다.
• 끝 번호는 다음과 같은 공식으로 구할 수 있다.

< 페이징의 끝 번호(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=10

• 끝 번호(endPage)는 아직 개선 여지가 있다.
• 만일 전체 데이터 수가 적다면 10페이지로 끝나면 안되는 상황이 생길 수도 있다.
• 그럼에도 끝 번호(endPage)를 먼저 계산하는 이유는 시작 번호(startPage)를 계산하기 수월하기 때문이다.

• 만일 화면에서 10개씩 보여준다면 시작번호는 무조건 끝 번호에서 9라는 값을 뺀 값이 된다.

< 페이징 시작 번호(startPage) 계산 
this.starpage = this.endPage - 9;

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

• 만일 끝 번호(endPage)와 한 페이지 당 출력되는 데이터 수(amount)의 곱이 전체 데이터 수(total)보다 크다면 끝 번호(endPage)는 다시 total을 이용해 다시 계산되어야 한다.

< total을 통한 endPage 계산 >
realEnd = (int) (Math.ceil((total * 1.0) / amount) );
if(realEnd < this.endPage) {
	this.endPage = realEnd;
}

• 먼저 전체 데이터 수(total)를 이용해 진짜 끝 페이지(realEnd)가 몇 번까지 되는지 계산한다.
• 만일 진짜 끝 페이지(realEnd)가 구해둔 끝 번호(endPage)보다 작다면 끝 번호는 작은 값이 되어야만 한다.

이전(prev)과 다음(next)

• 이전(prev)과 다음(next)은 간단히 구할 수 있다.
• 이전(prev)의 경우는 시작 번호(startPage)가 1보다 큰 경우라면 존재한다.

< 이전(prev) 계산 >
this.prev = this.startPage > 1;

• 다음(next)으로 가는 링크의 경우 위의 realEnd가 끝 번호(endPage)보다 큰 경우에만 존재하게 된다.

< 다음(next) 계산 >
this.next = this.endPage < realEnd;