10/17 RestApi 이어서 페이징 처리

 

 

 

 

▶ PageUtil

페이지네이션은 데이터를 여러 페이지로 나누어 표시하고, 

사용자가 페이지를 이동할 수 있는 링크 또는 버튼을 생성하는데 사용됩니다.

 

setPaging 메소드:
이 메소드는 페이지네이션 정보를 계산하고 멤버 변수에 저장합니다. 주어진 페이지 번호, 전체 항목의 개수, 

및 한 페이지에 표시할 항목의 개수를 기반으로 페이지네이션 정보를 계산합니다.

getMvcPaging 메소드:
이 메소드는 전통적인 서버 사이드 렌더링에서 사용되며, 페이지 번호를 링크로 구성한 HTML 문자열을 반환합니다. 

이를 통해 사용자가 페이지를 클릭하여 페이지를 전환할 수 있습니다.

getAjaxPaging 메소드:
이 메소드는 Ajax를 사용하여 페이지를 동적으로 변경할 때 사용됩니다. 

페이지 번호를 JavaScript 함수 호출로 구성한 HTML 문자열을 반환합니다. 

사용자가 페이지를 클릭하면 JavaScript 함수인 fnAjaxPaging을 호출하여 페이지를 비동기적으로 변경할 수 있습니다.

 

 

package com.gdu.app14.util;
 
import org.springframework.stereotype.Component;
 
import lombok.Data;
import lombok.NoArgsConstructor;
@Component
@NoArgsConstructor
@Data
public class PageUtil {
 
  private int page;     // 현재 페이지 번호(요청 파라미터로 받는다.)
  private int total;    // 전체 항목의 개수(DB에서 구한 뒤 받는다.)
  private int display;  // 한 페이지에 표시할 항목의 개수(요청 파라미터로 받는다.)
  private int begin;    // 한 페이지에 표시되는 항목의 시작 번호(계산한다.)
  private int end;      // 한 페이지에 표시되는 항목의 종료 번호(계산한다.)
  
  private int totalPage;        // 전체 페이지의 개수(계산한다.)
  private int pagePerBlock = 2; // 한 블록에 표시되는 페이지의 개수(임의로 정한다.)
  private int beginPage;        // 한 블록에 표시되는 페이지의 시작 번호(계산한다.)
  private int endPage;          // 한 블록에 표시되는 페이지의 종료 번호(계산한다.)
  
  public void setPaging(int page, int total, int display) {
    
    /* 한 페이지를 나타낼 때 필요한 정보 */
    
    // 받은 정보 저장
    this.page = page;
    this.total = total;
    this.display = display;
    
    // 계산한 정보 저장
    begin = (page - 1) * display + 1;
    end = begin + display - 1;
    end = end > total ? total : end;
    
    
    /* 전체 페이지를 나타낼 때 필요한 정보 */
    
    // 전체 페이지 계산
    totalPage = (int)Math.ceil((double)total / display);
    
    // 각 블록의 시작 페이지와 종료 페이지 계산
    beginPage = ((page - 1) / pagePerBlock) * pagePerBlock + 1;
    endPage = beginPage + pagePerBlock - 1;
    endPage = endPage > totalPage ? totalPage : endPage;
    
  }
  
  public String getMvcPaging(String url) {
    
    StringBuilder sb = new StringBuilder();
    
    sb.append("<div>");
    
    // 이전 블록
    if(beginPage == 1) {
      sb.append("<a>이전</a>");
    } else {
      sb.append("<a href=\"" + url + "?page=" + (beginPage - 1) + "\">이전</a>");
    }
    
    // 페이지 번호
    for(int p = beginPage; p <= endPage; p++) {
      if(p == page) {
        sb.append("<a>" + p + "</a>");
      } else {
        sb.append("<a href=\"" + url + "?page=" + p + "\">" + p + "</a>");
      }
    }
    
    // 다음 블록
    if(endPage == totalPage) {
      sb.append("<a>다음</a>");
    } else {
      sb.append("<a href=\"" + url + "?page=" + (endPage + 1) + "\">다음</a>");
    }
    
    sb.append("</div>");
    
    return sb.toString();
    
  }
  
  public String getAjaxPaging() {
    
    StringBuilder sb = new StringBuilder();
    
    sb.append("<div>");
    
    // 이전 블록
    if(beginPage == 1) {
      sb.append("<a>이전</a>");
    } else {
      sb.append("<a href=\"javascript:fnAjaxPaging(" + (beginPage-1) + ")\">이전</a>");
    }
    
    // 페이지 번호
    for(int p = beginPage; p <= endPage; p++) {
      if(p == page) {
        sb.append("<a>" + p + "</a>");
      } else {
        sb.append("<a href=\"javascript:fnAjaxPaging(" +p+ ")\">"+p+"</a>");
      }
    }
    
    // 다음 블록
    if(endPage == totalPage) {
      sb.append("<a>다음</a>");
    } else {
      sb.append("<a href=\"javascript:fnAjaxPaging(" + (endPage+1) + ")\">다음</a>");
    }
    
    sb.append("</div>");
    
    return sb.toString();
    
  }
  
}

 

 

 

회원을 등록하고 갯수가 넘어가면 페이지가 나타나 클릭이 가능합니다.

 

결과