페이징처리

페이징 처리 원칙

• 페이징 처리는 다른사람에게 URL로 전달하는 경우가 많기 때문에, GET방식만을 이용해야 한다.
• 게시글 목록 페이지의 하단에 페이지들의 번호를 보여주고 원하는 번호를 선택하면

해당 페이지로 이동해서 목록을 보여주어야 한다.

• 페이징은 반드시 필요한 페이지 번호만 출력해야한다.

만약 페이지당 10개의 게시글을 출력하는데 전체 게시글의 수가 42개라면 페이지의 번호는 5페이지까지여야 한다.

• 이전과 다음 버튼이 존재해야함.

게시글이 1000개인데 1페이지당 10개의 게시글을 볼 수 있게 했다면 페이징 버튼은 100개가 필요하다.

그런데 이전과 다음 버튼이 존재하지 않는다면 100개의 버튼을 한번에 보여줘야 한다.

그렇기 때문에 하단 페이지에 보여줄 버튼의 개수를 정하고 더 많은 데이터가 있다면 이전과 다음 버튼으로 표시해주어야 한다.

• 게시글을 조회하거나 수정, 삭제를 하고 난 뒤, 다시 원래의 목록 페이지로 이동해야 한다.

예를 들어서 게시판에 5페이지에 있는 어떠한 게시물을 조회하거나 수정, 삭제를 했다고 한다면, ‘목록’ 버튼을 이용해 목록으로 돌아갈 땐 5페이지로 이동하게끔 해야한다.

• 검색같은 다른 기능과 함께 쓰일떄는 1페이지로 이동해야한다.

 

페이징 로직 이해하기

totalCount = 154  // 게시글의 총 개수

displayPageNum = 5 // 페이징처리시 보여줄 num개수

displayNoticeNum = 10 // 한 페이지당 보여줄 notice개수

pageNum  // 현재 페이지

 

페이징 처리

 

totalNum(총 페이징 번호)

= totalCount % displayIndexNum  == 0 ? totalCount / displayIndexNum  : totalCount / displayIndexNum  + 1  

 

startNum(페이징 시작점 번호)

= totalNum % displayPageNum == 0 ? pageNum - 4 : pageNum - (pageNum % 5) + 1

 

endNum(페이징 마지막 번호)

= startNum + 4 <= totalNum ? startNum + 4 : totalNum

 

이전 버튼과 다음 버튼(boolean)

 

prev button(이전 버튼)

= startNum == 1 ? false : true

 

next button(다음 버튼)

= endNum * displayPageNum <= totalNum ? true : false

 

이전 버튼 기능 구현

a태그 href url에 startpage - 1 eq 0 ? 1 : pageNumber - 1

 

→ 시작 페이지가 1이라면  1 - 1 = 0 => 1을 세팅해준다 

      but 11이라면 11 - 1 = 10 => 이전 페이징의 마지막 endNumber로 이동하게

 

다음 버튼 기능 구현

a태그 href url에 totalPage eq pageNumber ? totalpage : pageNumber + 1

 

 → 전체 페이지가 10까지 있는데 현재 페이지가 10이다? 그렇다면 10을

      but 전체 페이지가 14까지 있는데 현재 페이지가 10이다? 

     그렇다면 10 + 1해서 다음 버튼의 시작점 11부터 

 

• foreach문에서 var = 사용할 변수명 /  begin = 반복시작 index / end = 반복 종료

변수명 i로 시작 페이지부터 마지막 페이지까지 반복한다.

→ a태그로 번호가 나온다.

 

게시글 처리

현재 4번 페이지를 보고있다면 게시글은 30~40번대가 나와야 한다.

 

startNoticeNum = (pageNum - 1) * displayNoticeNum   // 결과 30이 나온다.

 

endNoticeNum = pageNum * displayNoticeNum    // 결과 40이 나온다.

======================================================================

Criteria 클래스

페이징 쿼리를 동적 제어하기 위해 필요한 데이터 pageNum, amount와 같이 파라미터로 전달하기 위한 용도

각각의 데이터를 분리하여 파라미터로 전달해도 되지만 연관성 있는 데이터를 같이 관리함으로써 관리하기도 편하고 재사용성에도 좋다.

Criteria는 기준이라는 뜻

• 현재 페이지와 게시물 개수 변수(pageNum, amount)를 선언
• 파라미터 없이 Criteria 클래스를 호출했을때는 기본적으로 pageNum은 1, amount는 10을 가지도록 생성자를 작성
• 파라미터와 함께 Criterial를 호출하게 되면 파라미터의 값이 각각 pageNum과 amount값에 저장되도록 생성자 작성

 

PageMakerDTO 클래스

 

• startPage, endPage : 화면에 표시되는 페이지 시작번호와 끝번호에 대한 정보
• prevg, next : 화면에 보이는 10개 페이지의 이전 페이지오 ㅏ다음 페이지 존재 유무에 대한 정보
• total : 전체 페이지 정보이다. 해당 정보가 있어야 startPage, endPage, prev, next의 값을 구할 수 있어서 선언
• cri : Criteria클래스의 pageNum(현재 페이지) 변수 값을 얻어오기 위해서

현재 페이지에 대한 정보인 Criteria와 게시물의 총 개수인 total을 파라미터를 부여한 PageMakerDTO생성자를 작성한다.

해당 생성자는 전달받은 Criteria와 total 정보를 활용하여 계산 과정을 거친 후 pageMakerDTO의 변수에 대한 값을 초기화 하게 된다.

* Math.ceil -> 소수점 이하를 올림한다.

 

 

 

======================================================================

 

게시물 총 개수 구하는 쿼리

Controller과 view 처리

 

번호 페이지 구현

페이지 번호가 들어가도록

 

페이지 이동 번호 동작시키기

페이지 번호 a태그를 클릭하게되면 동작하는 메소드

 

다음 버튼과 이전 버튼 구현

 

현재 페이지 표시 구현

기존

변경