URL의 파라미터를 이용해서 정상적으로 원하는 페이지로 이동하는 것을 확인했다면 , 화면 밑에 페이지 번호를 표시하고 사용자가 페이지 번호를 클릭할수 있게 처리합니다. 페이지를 보여주는 작업은 다음과 같은 과정을 통해서 진행합니다.
브라우저 주소창에서 페이지 번호를 전달햇거 결과를 확인하는단계
JSP에서 페이지 번호를 출력하는 단계
각 페이지 번호에 클릭 이벤트 처리
전체 데이터 개수를 반영해서 페이지 번호 조절
페이지 처리는 단순히 링크의 연결이기 때문에 어렵지는 않지만, 다음그림과같이 목록 페이지 조회 페이지 수정 삭제 페이지 까지 페이지 번호가 계속해서 유지되어야만 하기 때문에 끝까지 신경써야 하는 부분들이 많은 편입니다. 다음 그림은 페이지 번호가 어떤 작업을 하던 유지되면서 링크가 연결 되는 모습입니다.
14.1 페이징 처리할때 필요한 정보들
화면에 페이징 처리를 하기위해서는 우선적으로 여러가지 필요한 정보들이 존재합니다 화면에 페이지는 크게 다음과 같은 정보들이 필요합니다.
현재페이지 번호
이전과 다음으로 이동 가능한 링크의 표시 여부(prev,next)
화면에서 보여지는 페이지의 시작번호와 끝번호(startPage,endPage)
14.1.1 끝 페이지 번호와 시작페이지 번호
페이징 처리를 하기 위해서 우선적으로 필요한 정보는 현재 사용자가 보고있는 페이지(page)의 정보입니다. 예를 들어 사용자가 5page를 본다면 화면의 페이지번호는 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= 20
끝 번호(endPage)는 아직 개선의 여지가 있습니다. 만일 전체 데이터 수가 적다면 10페이지로 끝나면 안되는 상황이 생길수도 있기때문입니다 .
그럼에도 끝번호(endPage)를 먼저 계산하는 이유는 시작번호 (startPage)를 계산하기 수월하기 때문입니다.
만일 화면에 10개씩 보여준다면 시작번호는 (startPage)는 무조건 끝번호(endPage)에서 9(한페이지에 보여줄 게시물 -1)라는 값이 됩니다.
페이징 시작번호(startPage)계산
this.startPage = 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)과 다음은 아주 간단히 구할 수있습니다. 이전(prev)의 경우는 시작번호(startPage)가 1보다 큰 경우라면 존재하게됩니다.
이전(prev)계산
this.prev = this.startPage>1;
다음(next)으로 가는 링크의 경우 위의 realEnd가 끝번호(endPage)보다 큰 경우에만 존재하게 됩니다.
다음(next)계산
this.next = this.endPage<realEnd;
14.2 페이징 처리를 위한 클래스 설계
pageDTO는 생성자를 정의하고 Criteria와 전체 데이터 수(total)을 파라미터로 지정합니다.
Criteria 안에는 페이지에서 보여주는 데이터 수(amount)와 현재 페이지 번호(pageNum)을 가지고 있기 때문에 이를 이용해서 필요한 모든 내용을 계산 할수있습니다.
BoardController의 list()는 다음과 같이 수정합니다.
list() 는 ‘pageMaker’라는 이름으로 PageDTO클래스에서 객체를 만들어서 Model에 담아줍니다. PageDTO를 구성하기 위해서는 전체 데이터수가 필요한데, 아직 그 처리가 이루어지지 않았으므로 임의의 값으로 123을 지정했습니다.
14.3 JSP에서 페이지 번호 출력
table 태그가 끝나는 직후에 페이지 처리 추가
이제 화면에 a태그 href속성값으로 단순히 번호만들가지게 변경됩니다
a태그가 원래의 동작을 못하도록 자바스크립트 처리합니다. 실체 페이지를 클릭하면 동작 하는 부분은 별도의 <form> 태그를 이용해서 처리하도록 합니다.(<c:out>을 사용는 것이 더 좋은 방법이지만 간단히 사용하기 위해서 EL로 처리하였습니다.)
기존 자바스크립트에 코드 추가
a 태그를 클릭해도 페이지이동이 없도록 preventDefault() 처리를 하고 <form> 태그내 pageNum값은 href속성값으로 변경합니다. 이 처리를 하고 나면 화면에서 페이지 번호를 클릭했을때 <form >태그 내의 페이지 번호가 바뀌는것을 브라우저 개발자 도구에서 확인가능합니다. 마지막은 actionForm자체를 submit 시킵니다.
