const grid = new Grid({
// ...,
pageOptions: {
perPage: 10 //한번에 보여줄 데이터 수
}
});
위처럼 페이징을 한다면 서버에서 페이징 처리를 해주어야한다.
만약 서버에서 페이징을 하지 않고, 프론트에서만 페이징을 하고싶다면 다음 속성을 추가한다.
const grid = new Grid({
// ...,
pageOptions: {
useClient: true, // front에서만 페이징 하는 속성
perPage: 10
}
});
이외에도 페이징과 관련된 API로는
이름 | 설명 |
---|---|
getPagination | Grid에서 사용하고 있는 tui-pagination의 인스턴스를 반환(기능을 사용하지 않는 경우 null을 반환) |
setPerPage | 한 페이지에 보여줄 데이터 수를 변경 |
appendRow | 클라이언트 페이징 :전체 데이터를 기준으로 로우를 추가,서버 페이징 :현재 페이지 데이터를 기준으로 로우를 추가 |
prependRow | 클라이언트 페이징 :전체 데이터를 기준으로 첫 번째 로우를 추가,서버 페이징 :현재 페이지 데이터를 기준으로 첫 번째 로우를 추가 |
removeRow | 클라이언트 페이징 :전체 데이터를 기준으로 로우를 삭제,서버 페이징 :현재 페이지 데이터를 기준으로 로우를 삭제 |
예시
const pagination = grid.getPagination();
const currentPage = pagination.getCurrentPage();
console.log(currentPage);
grid.setPerPage(10);
데이터 리턴 형식
{
"result": true, //성공, 실패
"data": {
"contents": [], // 실제 데이터
"pagination": { //페이징 관련
"page": 1, //페이지
"totalCount": 100 //데이터 개수
}
}
}
서버에서는 위의 json 형식에 맞춰서 보내주면 됩니다.
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