페이지네이션

서버 기반 페이지네이션

QCELL 그리드에 표시할 데이터 행 수가 많은 경우, 모든 데이터가 그리드 내에 표시되어 상하 스크롤이 자동으로 생성됩니다.
이럴 때 가독성이 떨어지므로 Pagination을 사용할 수 있습니다.

● Pagination은 데이터를 여러 페이지로 분할하여 표시하는 방식으로, 한 페이지에 표시할 데이터 수를 설정하면 페이지 수가 결정됩니다.

● 클라이언트 방식은 모든 데이터를 다운로드한 후 페이지별로 분할하여 표시하며, 서버 호 출 기반 방식은 그리드 생성 시 서버 프로그램을 호출하여 첫 페이지의 데이터와 페이지 수 정보를 받아 QCELL 그리드를 표시합니다.

● 서버와 통신을 위한 Pagination은 data, datacount 형식의 객체로 수신해야 합니다.
pagination : { unitlist: [10, 20, 30], pageunit: 10, mode: "extend", url: '/new_sample/getQcellList2.do', param: { data1: '1', data2: '2', data3: '3' }, loadonce: true, extendmove: true }

● 페이지를 호출할 때는 pageindex와 pageunit을 함께 서버에 전달하여 해당 페이지의 데이터를 생성하여 가져와야 합니다.

● 서버 프로그램(/getQcellList2.do)을 호출할 때 요청하는 페이지와 표시할 데이터 건수를 전달합니다.

● 서버 프로그램은 전체 데이터 수와 현재 페이지에 해당하는 데이터를 준비하여 응답해야 합니다.

● 서버에서 내려오는 전체 데이터 수와 설정한 페이지당 row 수를 기반으로 페이지 넘버링을 진행하며, 페이지를 누르면 해당 페이지의 데이터를 받아 표시합니다.

● QCELL 그리드는 데이터를 받아 화면에 표시하고 페이지 번호를 재계산하여 표시합니다.

● pagination에 대한 설정은 api 문서의 pagination을 참조하세요.

● 서버는 객체를 응답으로 제공하며, 데이터 배열과 데이터 수를 제공합니다.



이러한 프로그래밍을 할 수 있는 기본적인 구조를 포함하는 샘플입니다.

전자정부 프레임워크가 제공하는 데이터처리 객체를 사용하여 검색과 정렬 설정이 된 것을 반영한 pagination이 됩니다.

한 번에 가져오는 샘플은 주석처리가 되어 있습니다. 이를 풀면 확인해 보실 수 있습니다.

이때 호출하는 서버 프로그램은 /getQcellList1.do 입니다.

참고로 pagination에 대한 설정은 api 문서의 pagination을 꼭 참조하십시오.

서버는 응답으로 객체를 보내주며 객체 안에는 데이터 array와 데이터 수를 아래와 같은 형태로 제공하고 있습니다.
{"data":"[{\"id\":\"SAMPLE-00001\",\"name\":\"Runtime Environment\",\"description\":\"Foundation Layer\",\"useYn\":\"Y\",\"regUser\":\"eGov\"},.........,{\"id\":\"SAMPLE-00010\",\"name\":\"Runtime Environment\",\"description\":\"Integration Layer\",\"useYn\":\"Y\",\"regUser\":\"eGov\"}]","datacount":114} QCELL은 이 응답을 자동으로 처리하여 화면에 반영해 줍니다.

서버쪽 프로그램을 작성하는 개발자는 이 구조에 맞게 응답을 해 주어야 합니다.