[TOAST UI] 페이징 하기

공수정·2021년 11월 16일
0

ToastUI

목록 보기
1/1

1. 라이브러리 추가하기

  1. tui-pagination 라이브러리를 resources 폴더에 추가한다.
  2. html이나 jsp 파일에 연결 할 때에는 반드시 tui-pagination 라이브러리가 tui-grid 라이브러리보다 먼저 여야 한다.

2. grid 생성시 속성 추가하기

const grid = new Grid({
  // ...,
  pageOptions: { 
    perPage: 10		//한번에 보여줄 데이터 수
  }
});

위처럼 페이징을 한다면 서버에서 페이징 처리를 해주어야한다.
만약 서버에서 페이징을 하지 않고, 프론트에서만 페이징을 하고싶다면 다음 속성을 추가한다.

const grid = new Grid({
  // ...,
  pageOptions: {
    useClient: true,	// front에서만 페이징 하는 속성
    perPage: 10
  }
});

이외에도 페이징과 관련된 API로는

이름설명
getPaginationGrid에서 사용하고 있는 tui-pagination의 인스턴스를 반환(기능을 사용하지 않는 경우 null을 반환)
setPerPage한 페이지에 보여줄 데이터 수를 변경
appendRow클라이언트 페이징 :전체 데이터를 기준으로 로우를 추가,서버 페이징 :현재 페이지 데이터를 기준으로 로우를 추가
prependRow클라이언트 페이징 :전체 데이터를 기준으로 첫 번째 로우를 추가,서버 페이징 :현재 페이지 데이터를 기준으로 첫 번째 로우를 추가
removeRow클라이언트 페이징 :전체 데이터를 기준으로 로우를 삭제,서버 페이징 :현재 페이지 데이터를 기준으로 로우를 삭제

예시

const pagination = grid.getPagination();
const currentPage = pagination.getCurrentPage();
console.log(currentPage);

grid.setPerPage(10);

3. dataSource

  1. 데이터 리턴 형식

    {
      "result": true,	//성공, 실패
      "data": {
        "contents": [],	// 실제 데이터
        "pagination": { 	//페이징 관련
          "page": 1,		//페이지
          "totalCount": 100	//데이터 개수
        }
      }
    }

    서버에서는 위의 json 형식에 맞춰서 보내주면 됩니다.

  2. dataSource 연결

    const dataSource = {
      contentType: 'application/json',
      api: {
        readData: { url: '/api/readData', method: 'GET'}
      }
    };
    
    const grid = new tui.Grid({
        // ...,
      data: dataSource,
    });

    이런식으로 데이터를 읽어올 url을 지정해주면, 서버에서 페이징을 하는 경우에는 perPage와 page를 넘깁니다.

참고
1.페이지네이션
2. https://okky.kr/article/641192

profile
계속해서 공부하는 개발자입니다 :)

0개의 댓글