syidaxgrid
홈 가격 내 정보

GRID FEATURE

페이지 단위 탐색

페이지 나누기는 한 번에 표시하는 행 수와 이동 위치를 제어합니다. 전체 데이터 양과 한 페이지의 크기는 별도 설정입니다.

Markdown 원문 Features

동작 원리와 선택 기준

브라우저에 모든 행이 있는 클라이언트 페이지와 서버에서 한 구간씩 가져오는 조회를 구분하세요. pagination을 켠 것만으로 서버 조회 API가 만들어지지는 않습니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 20개씩 보여 주기

표 아래에서 사용자가 페이지 크기를 바꿀 수 있도록 선택지를 제공합니다.

javascript
grid.pagination = true;
grid.pageSize = 20;
grid.pageSizeOptions = [20, 50, 100];

결과 확인: 행이 120개라면 20개씩 6페이지로 탐색할 수 있습니다. 선택지를 바꾸면 표시 범위도 다시 계산됩니다.

예제 2. 전체 스크롤 목록

행이 많고 연속적인 탐색이 중요하다면 페이지를 끄고 가상 스크롤을 활용합니다.

javascript
grid.pagination = false;
grid.virtualScroll = true;

결과 확인: 페이지 번호 대신 Grid 내부 스크롤로 행을 탐색합니다. 내려받는 데이터 양은 원격 행 모델 여부에 달려 있습니다.

예제 3. 이동 결과를 다른 UI에 표시

페이지 변경 이벤트로 앱의 안내 문구나 분석 로그를 갱신합니다.

javascript
grid.addEventListener('paginationChanged', event => console.log(event.detail));

결과 확인: 사용자가 바꾼 페이지 정보가 전달됩니다. 전체 개수는 필터와 그룹화 후의 표시 결과 기준인지 함께 확인하세요.

조합할 때와 문제를 해결할 때

검색으로 결과가 줄면 기존 페이지가 더 이상 유효하지 않을 수 있습니다. 현재 페이지 번호만 따로 유지하지 말고 Grid가 전달한 상태를 따르세요.

그룹 행과 원본 주문 행의 개수가 다를 수 있으므로 페이지 표시를 원본 주문 수와 무조건 비교하지 않습니다.

함께 읽기