[ JSP ] 페이징처리의 한 방법 (그나마 간단하다고는 하지만 처음엔 쉽게 들어오지 않는)

번호	이름	제목	내용	조회수
1	오징어	사탕	사탕은 츄파츕스	30
2	고등어	딸기	딸기가 제철인가?	79
3	문어	핸드폰	공시지원가는 얼마인가	130

 

 

처음으로

이전페이지

1

2

3

4

5

6

다음페이지

끝으로

이렇게 게시물이 올라가있는 게시판이 있고 이것들을 페이징처리를 하는 방법이다.

 

현재 가지고 있는 정보는 

1. 한 페이지에 나오는 게시물 번호수 (ex 페이지 당 10개의 게시물)

2. 총 번호수 (총 게시물 수)

3. 현재 내가 선택한 페이지 (내가 보겠다고 선택한 임의의 8 페이지)

4. 총 페이지 수 (총 게시물 수가 60개고 10개씩 보여준다고 하면 10페이지)

5. 해당페이지를 누르면 이동할 페이지 url 

 

총 두 개의 메소드로 구성이 되어 있는 데

첫 번째 메소드는 총 몇  페이지로 이루어져 있는지 계산하는 메소드이고

두 번째 메소드는 페이지를 jsp 페이지에서 출력할 수 있도록 만들어줄 문자열을 만들어 반환한다.

 

	//■ 전체 페이지 구하는 메소드
	public int getPageCount(int numPerPage, int dataCount)
	{
		int pageCount = 0;
		
		pageCount = dataCount /numPerPage; 
		
		if(dataCount % numPerPage != 0 )
			pageCount++;
		
		
		return pageCount;
	}

 

메소드1에서는 총 게시물 수와 페이지 당 표시할 게시물 수를 받아서

총 몇 페이지가 필요한 지 보여주는데

만약 게시물이 234 개 있고 페이지 당 10개 씩 보여준다면 23 +1 = 24 장의 페이지가 필요할 것이다.

만약 10으로 나누어 떨어지는 수만큼 게시물이 있다면 딱 몫만큼만 페이지가 필요할 것이다. (예를 들어 230개라면 페이지는 딱 230/10 의 몫인 23장이 필요하다)

 

 

	//■ 페이징 처리 기능의 메소드

	public String pageIndexList(int currentPage, int totalPage, String listUrl)
	{
		StringBuffer strList = new StringBuffer();
		int numPerBlock = 10;
		
		int currentPageSetup; 
		int page;
		int n; 
		
		if (currentPage==0) 
			
		{
			return "";
				
		}

두 번째 메소드는 페이지를 jsp 페이지에서 출력할 수 있도록 만들어줄 문자열을 만들어 반환한다.

int 로 선언된 변수들은 지금 당장은 감이 잡히지 않을테니 밑에서 설명할 것이다. 

 

 다음페이지로 넘겨줄 url 다음에 페이지 번호를 넣어주기 위한 전처리를 해준다.

만약에 ? 가 있으면 & 를 붙여주고 ?가 없으면 ?를 붙여준다.

		if (currentPage==0) 
			
		{
			return "";
				
		}
		
		if (listUrl.indexOf("?") != -1) 
			listUrl = listUrl + "&";	
		else 							
			listUrl = listUrl + "?";

currentpageSetup 은

1 부터 10 은 0

11 부터 20은 10

21 부터 30 은 20  ... 이런 식으로 설정되어야 한다.

즉 현재내가 선택한 페이지를 식에 넣어 계산한 값이 0 이라면 페이지를 1부터 10까지 보여주고

10 이라면 11 부터 20까지 보여주겠다는 뜻이다.

 

 

그런데 마지막 번호를 살펴보면 식으로부터 20 / 10 * 10 은 20 이다. ( 10 이 되어야하는데 20 이다.)

그래서 현재 선택한 페이지가 10의 배수이면 10만큼 빼주도록 한것이다.

		if (listUrl.indexOf("?") != -1) 
			listUrl = listUrl + "&";	
		else 							
			listUrl = listUrl + "?";
		
		
		currentPageSetup = (currentPage / numPerBlock) * numPerBlock;
		
		if (currentPage % numPerBlock == 0)
			currentPageSetup  = currentPageSetup - numPerBlock;
		

 

처음으로 가는 버튼을 만드는 과정이다.

만약 

1. 총 페이지 수가 한 페이지에 들어가는 페이지보다 크다면 ( 지금 10장씩 보여주는데 만약에 페이지가 5장밖에 없다면 처음으로 버튼을 만드는 것이 되게 웃겨진다.)

2. 그리고 currentPageSetup 이 0 이상이라면( 즉, 내가 11 페이지를 선택했다면 처음으로 버튼이 필요하지만

1하고 10 사이의 페이지를 선택했다면 처음으로 버튼이 필요가 없다. 그냥 1 누르면 된다.)

처음으로 이동할 수 있는 링크<a> 태그를 만들어준다.

 

		if (currentPage % numPerBlock == 0)
			currentPageSetup  = currentPageSetup - numPerBlock;
		
		if((totalPage>numPerBlock) && (currentPageSetup>0))
			strList.append(" <a href ='" + listUrl + "pageNum=1'>1</a>");

 

 

이번에는 이전페이지로 버튼을 만들어줄것이다.

n 은 현재 선택한 페이지에서 -10 만큼 뒤로 이동시켜주기 위한 것이다.

(내가 지금 14페이지 인데 이전버튼을 누르면 4페이지로 이동한다.)

이 것도 

조건 1. 전체페이지가 10장을 넘어야하며(페이지가 1장뿐인데 이전페이지로 버튼이 있으면 안되니까)

조건 2. 현재 페이지가 최소 11페이지 이상이어야 한다.

 

		if((totalPage>numPerBlock) && (currentPageSetup>0))
			strList.append(" <a href ='" + listUrl + "pageNum=1'>1</a>");

		n = currentPage - numPerBlock;
		
		if ((totalPage > numPerBlock) && (currentPageSetup>0))
		{
			strList.append("  <a href='" + listUrl + "pageNum=" + n + "'>Prev</a>");
		
		}

여기서 코드 문자열에 빈공간이 들어가면 이렇게 잘못된 값이 전달되므로 주의!

 

 

 

이제부터는 본격적으로 페이지 번호들을 출력해줄 것이다. 

만약 내가 현재 45 페이지를 선택한 상태라면

45페이지의 currentPageSetup 은 40 이며

아래에는 41페이지부터 50 페이지까지 찍어줘야 한다.

page 라는 변수는 0 , 10, 20 이런데 

페이지를 찍어주려면 시작을 1,11,21, 이렇게 시작을 해야하므로 +1 을 해줬다,

 

		if ((totalPage > numPerBlock) && (currentPageSetup>0))
		{
			strList.append("  <a href='" + listUrl + "pageNum=" + n + "'>Prev</a>");
		
		}

		
		page = currentPageSetup + 1;

		while ((page<=totalPage) && (page<=currentPageSetup + numPerBlock))
		{
			if (page == currentPage)
				strList.append(" <span style='color:orange; font-weight:bold;'>" + page + "</span>");
			else 
				strList.append(" <a href = '" + listUrl + "pageNum=" + page + "'>" + page + "</a>");
			
			 page++;
					
		}

 

while 문을 통해 page 를 하나씩 증가시켜가며 페이지 번호를 찍을 것인데

조건식을 살펴보면

.. 예시를 통해서 살펴보는 것이 좋겠다.

(page<=totalPage) 

→ 현재 찍는 페이지가 총 페이지보다 같거나 작을 때까지만 찍는다

내가 지금 41부터 50까지의 구간을 찍으려고 한다. 45 페이지를 찍는데 마지막 페이지가 45페이지 까지면 거기까지만 찍는다.

(page<=currentPageSetup + numPerBlock)

→  현재 내가 41페이지부터 50페이지까지의 구간을 찍으려 한다. (즉. currentPageSetup 은 40 이다. ) 그러면 

 41부터 시작해서 50 까지만 찍어야한다. 그 이상으로 넘어가면 안된다.

만약에 현재 찍고 있는 페이지가 내가 현재 선택한 페이지번호와 같다면 주황색 굵은 글씨 처리를 해준다.

 

요롷게 말이다

이제 두 가지 처리만 남았다

다음페이지 버튼과 마지막 페이지로 가는 버튼이다!

 

 

			 page++;
					
		}

		n = currentPage + numPerBlock;
		
		if((totalPage - currentPageSetup) > numPerBlock)
			strList.append(" <a href = '" + listUrl + "pageNum=" + n + "'>Next</a>");

 

 

다음 페이지는 이전페이지와 마찬가지로 만약에 내가 11 페이지에서 이전페이지로 가고싶다면 11-10 =1 페이지로 이동

했다면 다음 페이지는 11 + 10 = 20 페이지로 이동해야 한다.

조건문에서는 다음페이지가 존재해야만 다음페이지 버튼이 생성되도록 해준 것이다,

총 64페이지인데 내가 현재 60페이지라면 다음페이지가 필요하지만 64페이지라면 다음 페이지가 필요없다.

 

 

 

		n = currentPage + numPerBlock;
		
		if((totalPage - currentPageSetup) > numPerBlock)
			strList.append(" <a href = '" + listUrl + "pageNum=" + n + "'>Next</a>");


		if((totalPage>numPerBlock) && ((currentPageSetup + numPerBlock)<totalPage))
			strList.append(" <a href = '" + listUrl + "pageNum=" + totalPage +  "'>" + totalPage + "</a>");
					
			
		
		return strList.toString();

마지막으로 마지막페이지 버튼이다.

조건1. 우선 10페이지는 넘어야하고, (5페이지가 총 페이지라면 다음페이지 버튼은 필요없을것)

조건2. 총 64페이지일 때는 60페이지까지만 마지막페이지 버튼이 만들어지도록 한다. (64페이지가 마지막인데 61,62,63,64페이지를 선택했을 때는 마지막페이가 필요가 없다)

 

맨 처음 선언해뒀던 StringBuffer 에 코드를 타고 쭉 내려오면서 필요한 문자열들을 append 했고

메소드는 최종StringBugger.toString() 한 결과를 return 하고 마무리된다.