목록 페이징하기 | 풀스택개발 EastFlag

Rest API 테스트

페이징을 지원하는 /api/paged_todo 를 포스트맨으로 테스트 해보자.

테스트 결과는 json으로 오며 data 필드에 todo 목록이 오고, total 필드에 전체 목록 갯수가 리턴된다

기존 ResultVo 객체에 없는 data와 total 두가지 필드를 추가한다.

data, totla 필드는 항상 존재하지는 않는 필드이므로 옵셔널 연산자를 붙인다.

export class ResultVo {
  result: number;
  msg: string;
  data?: any;
  total?: number;
}

export class ResultVo {

result: number;

msg: string;

data?: any;

total?: number;

}

페이징 요소

페이징을 하기 위해서 세가지 요소가 필요하다.

현재 몇페이지인지를 나타내는 페이지 인덱스(1부터 시작), 한페이지에 담는 페이지 사이즈, 전체 갯수

3가지 변수를 담을 VO 객체를 domain폴더에 page.vo.ts에 정의한다.

/**
 * pageIndex: 현재 페이지 인덱스 1,2,3,,,
 * pageSize: 한 페이지에 보여지는 갯수
 * totalCount: 뉴스의 총갯수
 * pageSizeOptions: 한페이지에 보여지는 갯수를 조정하는 옵션
 */
export class PageVo {
  constructor(public pageIndex: number = 1,
              public pageSize: number = 10,
              public totalCount: number = 0) {
  }
}

/**

* pageIndex: 현재 페이지 인덱스 1,2,3,,,

* pageSize: 한 페이지에 보여지는 갯수

* totalCount: 뉴스의 총갯수

* pageSizeOptions: 한페이지에 보여지는 갯수를 조정하는 옵션

export class PageVo {

constructor(public pageIndex: number = 1,

public pageSize: number = 10,

public totalCount: number = 0) {

}

서비스 수정

서비스에 getPagedTodoList를 추가한다.

  getTodoList(): Observable<TodoVo[]> {
    return this.http.get<TodoVo[]>(environment.HOST + '/api/todo');
  }

  getPagedTodoList(start_index: number, page_size: number): Observable<ResultVo> {
    return this.http.get<ResultVo>(environment.HOST +
      `/api/paged_todo?start_index=${start_index}&page_size=${page_size}`);
  }

getTodoList(): Observable<TodoVo[]> {

return this.http.get<TodoVo[]>(environment.HOST + '/api/todo');

}

getPagedTodoList(start_index: number, page_size: number): Observable<ResultVo> {

return this.http.get<ResultVo>(environment.HOST +

`/api/paged_todo?start_index=${start_index}&page_size=${page_size}`);

}

모델 정보 생성

todo.component.ts에 page 변수를 선언하고 getTodoList() 함수를 수정한다.

start_index는 0부터 시작하는 값이므로 계산을 해야 한다.

만일 페이지 사이즈가 15라면 첫번째 페이지 pageIndex =1 에서는

0, 15 : 0부터 15개 가져오기

두번째 페이지는

15, 15: 15부터 15개 가져오기

세번째 페이지는

30, 15: 30부터 15개 가져오기

와 같이 되어야 한다.

export class TodoComponent implements OnInit {

  page = new PageVo();

  getTodoList() {
/*    this.heroService.getTodoList()
      .subscribe(body => {
        console.log('getTodoList', body);
        this.todoList = body;
      });*/

    let start_index = (this.page.pageIndex - 1) * this.page.pageSize;

    this.heroService.getPagedTodoList(start_index, this.page.pageSize)
      .subscribe(body => {
        console.log('getTodoList', body);
        this.todoList = body.data;
        this.page.totalCount = body.total;
      });
  }

export class TodoComponent implements OnInit {

page = new PageVo();

getTodoList() {

/* this.heroService.getTodoList()

.subscribe(body => {

console.log('getTodoList', body);

this.todoList = body;

});*/

let start_index = (this.page.pageIndex - 1) * this.page.pageSize;

this.heroService.getPagedTodoList(start_index, this.page.pageSize)

.subscribe(body => {

console.log('getTodoList', body);

this.todoList = body.data;

this.page.totalCount = body.total;

});

}

뷰와 바인딩하기

이미 만들어진 페이징을 지원하는 부트스트랩 UI와 바인딩한다.

https://ng-bootstrap.github.io/#/components/pagination

위 사이트의 example과 api를 참고한다.

뷰에 아래와 같이 바인딩한다. 페이징에 필요한 필수 요소 3가지를 바인딩한다.

  <ngb-pagination class="d-flex justify-content-center" 
                  [collectionSize]="page.totalCount" [pageSize]="page.pageSize"
                  [(page)]="page.pageIndex">
  </ngb-pagination>

<ngb-pagination class="d-flex justify-content-center"

[collectionSize]="page.totalCount" [pageSize]="page.pageSize"

[(page)]="page.pageIndex">

</ngb-pagination>

이제 화면을 보고 테스트하면 페이징이 제대로 보일것이다.

그러나 다른 페이지를 클릭하면 이동하지 않는다.

페이지 이벤트 처리

pageChanged 이벤트를 추가한다.

  <ngb-pagination class="d-flex justify-content-center"
                  [collectionSize]="page.totalCount" [pageSize]="page.pageSize"
                  [(page)]="page.pageIndex" (pageChange)="pageChanged($event)">
  </ngb-pagination>

<ngb-pagination class="d-flex justify-content-center"

[collectionSize]="page.totalCount" [pageSize]="page.pageSize"

[(page)]="page.pageIndex" (pageChange)="pageChanged($event)">

</ngb-pagination>

이벤트로 넘어오는걸 콘솔로 확인해보면 pageIndex가 넘어오는것을 알수 있다.

  pageChanged(e: any) {
    // pageIndex가 넘어온다.
    console.log(e);
    console.log(event);
    this.page.pageIndex = e;
    this.getTodoList();
  }

pageChanged(e: any) {

// pageIndex가 넘어온다.

console.log(e);

console.log(event);

this.page.pageIndex = e;

this.getTodoList();

}