[엑스플랫폼] 쇼케이스 따라하기 (17) - 페이징

- Grid > Paging

의도는 환경에 따라 대용량 데이터를 처리하기가 어려울 경우에 대안으로 사용하고자 하는건데

페이지 단위의 콘텐츠에 대한 경험이 워낙 깊이 박혀있어서 의도적으로 페이지를 구현하고자 원할 수도 있습니다.

예제의 시나리오는 데이터는 한번에 가져오고 화면상에 보여지는 시점에 페이징 효과를 내고 있습니다.

조회 버튼 클릭시 호출되는 함수

function fn_Callback(trid, ErrorCode, ErrorMsg){

if( trid == "tr1" ) {

if( ErrorCode < 0 ) {

trace("Error");

}else{

var iLastRow=iStartPageNo*iUnitSelRowNo;

ds_Server.filter("rowno >= "+(iLastRow+iStartSelRowNo)+" && rowno <= "+(iLastRow+iUnitSelRowNo));

if( ds_Server.getRowCount() == 0 ){

alert("더이상 조회할 자료가 없습니다.");

ds_Server.filter("");

return;

}else{

// Transaction처리하면 아래 세 라인은 삭제하세요..

ds_Client.clearData();

ds_Client.copyData(ds_Server, true);

ds_Client.filter("rowno >= "+(iLastRow+iStartSelRowNo)+" && rowno <= "+(iLastRow+iMaxPageNum));

iServerRowCount=ds_Server.getRowCount();

fn_SetStyle();

fn_SetPageNo();

div_page.stc_No0.style.color="red";

}

}

}

}

ds_server가 메인 데이터셋인데 여기에 필터를 걸어 해당하는 영역에 포함되는 데이터만 가지고 옵니다.

ds_Server.filter("rowno >= "+(iLastRow+iStartSelRowNo)+" && rowno <= "+(iLastRow+iUnitSelRowNo));

그리고 필터링된 데이터셋을 실제 사용될 데이터셋에 복사해놓고 지정된 페이지 단위만큼 다시 필터링릉 걸어줍니다.

ds_Client.copyData(ds_Server, true);

ds_Client.filter("rowno >= "+(iLastRow+iStartSelRowNo)+" && rowno <= "+(iLastRow+iMaxPageNum));

하단의 페이지 번호는 div_page 영역 안에 포함되어 있기 때문에 페이지 이동시마다

로직에 따라 이를 표현해줍니다.

function fn_SetPageNo(){

var sPage=iStartPageNo*iMaxPageNum;

// 이전버튼 처리

if(iStartPageNo < 1){

div_page.stc_Prev.visible=false;

} else {

div_page.stc_Prev.visible=true;

}

// 마지막 버튼 처리

if(iServerRowCount < iUnitSelRowNo){

div_page.stc_Next.visible=false;

}else{

div_page.stc_Next.visible=true;

}

// 인덱스 번호 처리

for(var i=0; i<iMaxPageNum; i++){

eval("div_page.stc_No"+i+".visible=true");

eval("div_page.stc_No"+i+".text="+(sPage+i+1));

if(iServerRowCount < (i*iMaxPageNum)){

eval("div_page.stc_No"+i+".visible=false");

} else {

eval("div_page.stc_No"+i+".visible=true");

}

}

}

데이터셋이 바인딩된 상태에서 페이지를 클릭할때마다 필터링 처리를 해주면서 데이터를 갱신해줍니다.

function div_page_stc_No_onclick(obj:Static,  e:ClickEventInfo){

var iNo=new Number(obj.text);

var iFirstNum=(iNo-1)*iMaxPageNum+1;

var iLastNum=iFirstNum+iMaxPageNum;

fn_SetStyle();

obj.style.color="red";

ds_Client.filter("");

ds_Client.filter("rowno >= "+iFirstNum+" && rowno < "+iLastNum);

}

http://cafe.naver.com/xplatform101/167