IBSheet8은 50,000개 이내의 데이터(20여개 열기준)는 페이지 처리 없이 조회 할 것을 권장합니다.

하지만 데이터 양이 이보다 많거나, 대량 데이터 조회에 따른 서버의 부담을 줄이기 위해서 페이징 조회 기능도 제공하고 있습니다.

 페이징 조회는 전체 데이터 중 일부를 PageLength 개수 나누어 조회하는 방법 입니다.


페이징 조회 방식에는 세로스크롤을 통해 이전 조회 데이터 밑에 새로운 데이터를 추가 시키는 ScrollAppend 방식(SearchMode:3)과 조회하는 페이지 데이터 만 화면에 표시하는 ServerPaging 방식(SearchMode:4) 이 있습니다.


시트에 전체 데이터를 가지고 있지 않으므로 조회를 제외한 많은 기능에 제약 사항이 있습니다.


[페이징 조회시 사용할 수 없는 기능] - 단순 조회용으로만 사용가능

- 저장 

- 소계, 합계

- 트리 

- Merge 

- 필터(조회된 페이지내에서 필터는 가능)

- 피벗

- 찾기(ctrl+shift+F)  등


페이징 조회를 사용하는 과정은 다음과 같습니다.


1. 조회 방식을 설정

//페이지 네비게이션에서 선택된 페이지의 데이타만 표시하는 방식
options.Cfg = {SearchMode: 4, ...};

2. 한 페이지에 로드하는 레코드 개수를 설정 (default: 20) 

options = {
    Cfg :{
      PageLength: 100  // 한페이지당 행(Row) 개 수
    }
};


3. 페이지 네비게이션 설정 (IBSheet8의 기본 네비게이션을 사용하는 경우)

options.Cfg = {
    InfoRowConfig: {
        "Visible": true,
        "Layout": ["Paging", {Value:"별도 표시하는 내용을 입력할 수 있습니다.", TextColor:"#FF0000"}, "Count"], // default: ["Paging","Count"])
        "Space": "Bottom",  // "Top", "Bottom" 위치 설정
        "Format": "CHANGEROWS개 행이 수정되었습니다." // Count 영역에 들어갈 내용
    }
 };


시트에서 제공하는 페이지 네비게이션 외에 다른  디자인으로 표현하고자 하는 경우에는 따로 구현을 해야 한다.

ex)

샘플(https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/html/main.html)

데이터조회 >> 페이징

페이지네비게이션 표시, JQuery 네비게이션 표시 부분 참고


4. doSearchPaging()함수를 통해 조회

//SearchMode가 3이거나 4인 경우 조회 함수
var opt = {
  "url":"/cust/getCustInfo.do",
  "param":"custId=92123&empId=24342",
  "method":"POST",
  "callback":function (rtn) {
    var rtnData = JSON.parse(rtn.data);
    alert("전체 데이터 건수 :" + rtnData["Total"]);
  }
};
sheet.doSearchPaging(opt);

5. 서버에서는 페이지 인덱스(ibpage) 값에 따라 해당하는 데이터를  DB에서 조회하여 리턴한다. (PageLength에서 설정한 개수만큼만) 이때 Total 에 전체 데이터 건수가 리턴 되어야 합니다.


6. 서버에서 조회데이터 리턴 시 Total 속성을 통해 전체 데이터의 건수정보를 리턴 

int page = Integer.parseInt( request.getParameter("ibpage") );
//최초 조회시에만 전체 건수를 얻는다.
int total = 0;
if(page == 1){
  pstmt = conn.prepareStatement("SELECT COUNT(1) FROM TABLE_NAME");
  rs = pstmt.executeQuery();
  //전체 건수
  if(rs.next()){
    total = rs.getInt("CNT");
  }
}
//pageLength값을 기준으로 데이터를 100건 단위로 잘라서 조회한다.
int startrow,endrow;
startrow = ((page-1)*100) + 1;
endrow = startrow + 99;
/*
page 1 ==> startrow:1,endrow:100
page 2 ==> startrow:101,endrow:200
page 3 ==> startrow:201,endrow:300
....
*/
String query = "SELECT * FROM "
+"(SELECT ROWNUM RN, EMP, EMP_NO,.... FROM TABLE_NAME)"
+" WHERE RN BETWEEN ? and ?";
pstmt = conn.prepareStatement(query);
pstmt.setInt(1, startrow);
pstmt.setInt(2, endrow);
rs = pstmt.executeQuery();
//전체 데이터 수와 조회된 데이터를 갖고 json 을 만들어 리턴한다.
StringBuffer rtnStr = new StringBuffer();
rtnStr.append("{"); 
//전체 건수
if(total!=0){
  rtnStr.append("Total:"+total+","); 
}
rtnStr.append(" Data:[");
while(rs.next()){
   //SaveName을 이용한 방법
  rtnStr.append("{EMP:'"+rs.getString("EMP")+"',EMP_NO:'"+rs.
  getString("EMP_NO")+....."'},");
}
//마지막 콤마(,)를 제거
rtnStr.substring(0,rtnStr.length()-1);
rtnStr.append("]}"); 
//json string 출력
out.println(rtnStr.toString())

[서버에서 만들어진 데이터 규격]

// Data 속성안에 배열형태로 데이터 구성 (cfg)PageLength 에서 설정한 개수만큼
{"Data":
    [
        {"sa_name":"홍길동","sa_no":"940154","sa_dept":"A021"},
        {"sa_name":"김지수","sa_no":"950757","sa_dept":"B022"},
        ... PageLength 개수 만큼 ...
    ],
 "Total":25410      //<-- DB상의 전체건수 전체 건수(반드시 필요)
}

7. 헤더 클릭을 통한 Sort 처리

(Cfg)SortCurrentPage 값에 의하여 헤더 클릭 시 조회 된 데이터 내에서 Sort 할 것인지 서버에서 Sort된 데이터를 표시 할 것인지 결정된다.

iborderby 파라미터에 클릭한 헤더의 Sort 정보가 전송된다.


8. 엑셀 다운로드

시트에 전체 데이터가 없기 때문에 directDown2Excel 함수를 이용하여 다운로드 해야 한다.