[Vue.js] Pagination

Pagination

• Pagination의 정의
• JPA Pagination 동작원리

Paging은 결과 데이터를 통째로 리턴해주지 않고 Spring에서 페이지 사이즈와 시작 페이지에 상응하는 데이터를 넘겨주는 리턴처리 방식을 말합니다.
paging을 사용하려면 PagingAndSortingRepository가 필요하지만 JpaRepository가 이미 상속하고 있기 때문에 JpaRepository를 사용하신다면 별도로 상속해주지 않아도 됩니다.
PagingAndSortingRepository는 Pageable을 파라미터에 담을 수 있는 메서드를 제공해줍니다.

public Page findAll(Pageable pageable);

위 코드와 같이 paging을 위해서 리턴타입을 Page로 설정해주어야 합니다. 그렇지 않을경우 JSON를 통해 페이징 정보를 받지 못하고 쿼리 파라미터에 사용된 Pageable은 무용해집니다.

기본적으로 URL 파라미터를 통해 페이지에 리턴해줄 데이터 수를 제한하기 위해 사용되는(limit)과 데이터 정렬에 필요한 sort를 받을 수 있습니다.

 http://localhost:8080/people?page=2&limit=20

vue pagination

ant-design pagination API에 명시된 변수명과 코드에 사용한 변수명이 달라서 pagination이 적용되지 않았습니다.

검색 시 기존 전체 리스트 pagination load() 메서드를 그대로 사용해서 pagination이 검색 조건으로 지정되지 않는 부분은 수정되어야 합니다. 또한 symbol 기준으로 table filter를 걸었을 때 pagination이 적용되지 않는 부분도 UX를 고려해 포기하든 적용시킬 수 있는 방법을 고안하든 결정해야 합니다.

<a-table
row-key="objectId"
:columns="columns"
:data-source="data"
:pagination="pagination"
@change="moveOn"
>


 async load(options?: { page: number}) {
    const pageOptions = options || {page: 1};

    const { totalElements, content } = await HistoryApi.list(
      pageOptions
    );

    this.data = content;

    this.pagination = {
      current: pageOptions.page,
      defaultCurrent: 1,
      total: totalElements
    };
  }

  async moveOn(pagination: any) {
    this.pagination = pagination;
    await this.load({page: this.pagination.current});
  }

---

참고자료

• Spring Data REST Reference Documentation - 4.Paging and Sorting
• Medium - Ant Design Vue(Pagination)
• Ant Design Vue - pagination API