[Spring] 페이징 화면 처리

페이징 화면 처리

URL의 파라미터를 이용해서 정상적으로 원하는 페이지로 이동하는 것을 확인했다면, 화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할 수 있게 처리한다.

페이지를 보여주는 작업은 다음과 같은 과정을 통해 진행된다.

• 브라우저 주소창에서 페이지 번호를 전달해서 결과를 확인하는 단계
• JSP에서 페이지 번호를 출력하는 단계
• 각 페이지 번호에 클릭 이벤트 처리
• 전체 데이터 개수를 반영해서 페이지 번호 조절
  

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

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

화면에 페이징 처리를 하기 위해서는 우선적으로 여러 가지 필요한 정보들이 존재한다.
화면에 페이지는 크게 다음과 같은 정보들이 필요하다.

• 현재 페이지 번호(page)
• 이전과 다음으로 이동 가능한 링크의 표시 여부(prev, next)
• 화면에서 보여지는 페이지의 시작 번호와 끝 번호(startPage, endPage)

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

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

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

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

Math.ceil()은 소수점을 올림으로 처리하기 때문에 다음과 같은 상황이 가능하다.

• 1페이지의 경우 : Math.ehil(0.1)*10 = 10
• 10페이지의 경우 : Math.ehil(1)*10 = 10
• 11페이지의 경우 : Math.ehil(1.1)*10 = 20

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

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

this.starPage = this.endpage-9;

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

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

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

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

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

이전(prev)과 다음(next)

이전과 다음은 아주 간단히 구할 수 있다.
이전의 경우는 시작 번호가 1보타 큰 경우라면 존재하게 된다.

this.prev = this.startPage >1;

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

this.next = this.endPage < realEnd;

관련 서적 : 코드로 배우는 스프링 웹 프로젝트