Spring + MyBatis + DB = 작은 웹사이트 - (8) 페이징 처리 로직

처음부터 페이징 처리 로직을 혼자서 짜본 적이 없어서 삽질을 좀 많이 했다.

다른 분들 소스도 많이 찾아봤는데 나는 페이징 처리에 필요한 계산은 다 객체 안에 숨겨서 끝내버리고 싶고

객체 계산결과에 따른 화면 처리 역시 js에서 함수로 빼서 처리하다보니 이런 결과물이 나왔다.

기본 로직은 다른 분들이 공개해두신 소스와 별 차이가 없을 것....이라고 추정...한다...

실제로 사용한 페이징 객체는 아래와 같다.

package common.vo;

public class PagingVO {

private static final int NOTE_PER_PAGE = 10; //페이지 당 게시물 수

private static final int BLOCK_PER_PAGE = 5; //화면 당 페이지 블록 수

private int totalCount; //전체 게시물 수

private int totalPageNum; //전체 페이지 수

private int totalBlockNum; //전체 페이지블록 수

private int curBlock; //현재 블록 번호

private int curPage; //현재 페이지 번호

private int lastPage; //현재 블록의 마지막 페이지

private int firstPage; //현재 블록의 첫번째 페이지

private int lastNote; //현재 페이지의 마지막 게시물

private int firstNote; //현재 페이지의 첫번째 게시물

public int getTotalCount() {

return totalCount;

}

public void setTotalCount(int totalCount) {

this.totalCount = totalCount;

}

public int getTotalPageNum() {

return totalPageNum;

}

public void setTotalPageNum(int totalPageNum) {

this.totalPageNum = totalPageNum;

}

public int getTotalBlockNum() {

return totalBlockNum;

}

public void setTotalBlockNum(int totalBlockNum) {

this.totalBlockNum = totalBlockNum;

}

public int getCurBlock() {

return curBlock;

}

public void setCurBlock(int curBlock) {

this.curBlock = curBlock;

}

public int getCurPage() {

return curPage;

}

public void setCurPage(int curPage) {

this.curPage = curPage;

}

public int getLastPage() {

return lastPage;

}

public void setLastPage(int lastPage) {

this.lastPage = lastPage;

}

public int getFirstPage() {

return firstPage;

}

public void setFirstPage(int firstPage) {

this.firstPage = firstPage;

}

public int getLastNote() {

return lastNote;

}

public void setLastNote(int lastNote) {

this.lastNote = lastNote;

}

public int getFirstNote() {

return firstNote;

}

public void setFirstNote(int firstNote) {

this.firstNote = firstNote;

}

public static int getNotePerPage() {

return NOTE_PER_PAGE;

}

public static int getBlockPerPage() {

return BLOCK_PER_PAGE;

}

public PagingVO() {}

public PagingVO(int totalCount, int curPage) {

super();

this.totalCount = totalCount;

this.curPage = curPage;

//전체 페이지 수 = 전체 게시물 수 / 페이지 당 게시물 수 

int totalPageNum = (int) Math.ceil( (double) totalCount / NOTE_PER_PAGE );

this.totalPageNum = totalPageNum;

//전체 페이지블록 수 = 전체 페이지 수 / 화면 당 페이지블록 수

int totalBlockNum =  (int) Math.ceil( (double) totalPageNum/ BLOCK_PER_PAGE );

this.totalBlockNum = totalBlockNum;

//현재 페이지블록 번호 = 현재 페이지 번호 / 화면 당 페이지블록수

int curBlock = (int) Math.ceil( (double) curPage / BLOCK_PER_PAGE );

this.curBlock = curBlock;

//현재 블럭의 끝 페이지  = 현재 페이지블록 번호 * 화면 당 페이지 블록 수 

int lastPage = curBlock * BLOCK_PER_PAGE;

//현재 블럭의 시작 페이지 = 현재 블럭의 끝 페이지 - 화면 당 페이지 블록 수  + 1

int firstPage = lastPage -  BLOCK_PER_PAGE + 1;

this.firstPage = firstPage;

//게시물 갯수가 적어서 페이지 블록을 5개 생성할 필요가 없는 경우, 총 페이지 수에 맞춰서 페이지 블록 생성

if(totalPageNum <= lastPage) lastPage = totalPageNum;

this.lastPage = lastPage;

//현재 페이지의 끝 글 번호 = 현재 페이지 * 페이지 당 게시물

int lastNote = curPage * NOTE_PER_PAGE;

this.lastNote = lastNote;

//현재 페이지의 시작 글 번호  = 현재 페이지의 끝 글 번호 - 페이지 당 게시물 + 1

int firstNote = lastNote - NOTE_PER_PAGE + 1;

this.firstNote = firstNote;

}

@Override

public String toString() {

return "getTotalCount : " + getTotalCount() + "\ngetTotalPageNum : " + getTotalPageNum() + 

"\ngetTotalBlockNum : " + getTotalBlockNum() + "\ngetCurBlock : " + getCurBlock() + 

"\nlastPage : " + getLastNote() + "\ngetFirstPage : " + getFirstPage() + 

"\nlastNote : " + getLastNote() + "\ngetFirstNote : " + getFirstNote() + 

"\ngetNotePerPage : " + getNotePerPage() + "\ngetBlockPerPage : " + getBlockPerPage();

}

}

혹시나 나중에라도 getter와 setter가 필요할지도 모르니 일단 필드별로 모두 생성은 해줬다.

나는 귀찮아서 블록 당 페이지 수와 페이지 당 게시물 수를 static 변수로 고정시켜버렸는데,

필요하다면 이 변수들도 private int로 수정한 다음 jsp에서 파라미터 값으로 이 변수값들을 함께 보내서 계산하면 될 것 같다.

페이징 처리 로직을 짰을 당시 의식의 흐름은 이렇다.

내가 원하는 모양은

1 2 3 4 5         6 7 8 9 10        11 12 13 14 15        16 17 18 19 20

이런 식으로 한 화면 당 5개의 페이지가 보여지고, 

한 페이지에는 총 10개의 게시물을 담아서 보낸다.

이 계산을 위해서는 먼저 전체 게시물 수를 담아줄 필드 및 페이지 당 게시물 수, 화면 당 페이지 블록 수 각각을 담아줄 필드가 필요하다.

전체 게시물 수는 데이터 갯수에 따라 변경되지만 페이지 당 게시물 수, 화면 당 페이지 블록 수는 고정시켜둘 생각이니까 

private static final int NOTE_PER_PAGE = 10; //페이지 당 게시물 수

private static final int BLOCK_PER_PAGE = 5; //페이지 당 페이지 블록 수

private int totalCount; //전체 게시물 수

가 필요하다.

그리고 한 페이지에 10개씩 보여주려면 DB에서 조회해올 때 순번을 매겨서 

1번부터 10번까지 1번 페이지, 11번부터 20번까지 2번 페이지, 21번부터 30번까지 3번 페이지

와 같은 식으로 잘라서 가져와야 하므로 해당 페이지의 첫번째 게시물 번호, 마지막 게시물 번호, 페이지 번호를 담을 필드가 필요하다.

private int curPage; //현재 페이지 번호

private int lastNote; //현재 페이지의 마지막 게시물

      private int firstNote; //현재 페이지의 첫번째 게시물

     

그리고 1번 페이지~5번 페이지, 6번 페이지~ 10번 페이지 와 같이 페이지 블록을 5개씩 자르려면 

현재 블록의 첫번째 및 마지막 페이지 번호, 전체 페이지 갯수, 전체 페이지 블록 수를 담을 필드가 있어야 한다. 

화면에서 이전 버튼(<<), 다음 버튼(>>) 을 눌렀을 때 이전 블록이나 다음 블록을 가져올 수 있도록

현재 블록 번호를 담는 필드가 있어도 계산이 무척 편해질 것 같다. 

따라서 

  private int totalPageNum;    //전체 페이지 수

private int totalBlockNum; //전체 페이지블록 수

private int curBlock; //현재 블록 번호

private int lastPage; //현재 블록의 마지막 페이지

private int firstPage; //현재 블록의 첫번째 페이지

를 추가해준다.

전체 페이지 수를 계산할 때 전체 게시물 수를 한 페이지에 보여줄 게시물 수로 나눠주면 될 것이다.

예를 들어 전체 게시물 수가 32개라면 단순히 나눠버렸을 경우 32/10 = 3 이 되어 페이지가 3개만 생성이 된다.

그러면 마지막 페이지에 실리지 않은 2개의 게시물은 죽었다 깨어나도 볼 수 없어지므로 그냥 나눠버리지 말고 올림 처리를 해야한다.

이를 위해 Math.ceil 함수를 사용한다. 

그래서 전체 페이지 수 

  = 전체 게시물 수 / 페이지 당 게시물 수 

 -> Math.ceil(전체 게시물 수 / 페이지 당 게시물 수 )

전체 페이지 블록 수를 구할 때도 마찬가지로 전체 페이지 수를 페이지 당 블록 수로 나눈 값을 올림 처리하면 될 것이다. 

그래서 전체 페이지 블록 수 = Math.ceil(전체 페이지 수 / 페이지 당 페이지블록 수)

현재 페이지 블록 번호 = Math.ceil(현재 페이지 번호 / 페이지 당 페이지블록 수)

현재 블럭의 끝 페이지  = 현재 페이지블록 번호 * 페이지 당 페이지 블록 수 

현재 블럭의 시작 페이지 = 현재 블럭의 끝 번호 - 페이지 당 페이지 블록 수  + 1

현재 페이지의 끝 글 번호 = 현재 페이지 * 페이지 당 게시물

현재 페이지의 시작 글 번호  = 현재 페이지의 끝 글 번호 - 페이지 당 게시물 + 1

공부할 때도 손으로 써가면서 무식하게 공부하는 버릇이 붙어서인지

다른 분들이 올려둔 소스를 그냥 보기만 할 때보다

이렇게 로직을 서술해가면서 정리하다보니 더 쉽게 정리된 것 같다.

화면에서 페이징 객체를 가지고 와서 처리하는 부분은 앞 포스팅에서 정리를 했으니 스킵