목차

페이징 방식 가이드

그리드 페이징 처리 예제이다.

그리드 페이징 처리를 위해서는 아래 예시와 같이 총 데이터 것수, 페이징당 행 건수, 조회 시작 행 번호가 필요하다.

맨 먼저 조회 대상 레코드 건수 정보를 조회하고, 그 이후에는 총 데이터 것수, 조회 시작 행 번호와 페이지당 행 건수 정보를 기준으로 조회한다.

예시

툴 설치 디렉토리\template\HTML5\COMPONENT\GRID\grid_paging.jsp.txt → grid_paging.jsp 이름 변경후

해당 파일을 WAS 서버에 적용하고, 해당 서버 URL로 XTranMap의 TR_SELECT 트랜잭션에 대한 URL을 변경후 테스트 진행해야 한다.

템플릿 위치: /HTML5/COMPONENT/GRID/grid_paging

템플릿 파일

화면 스크립트

function btnClear_on_mouseup(objInst)
{
	DS_DATA.init();

	DS_COND.setdatabyname(0, "start_row_no", "0");

	pagBar.setmaxpagecount(1);
	pagBar.setcurpage(1);

	btnFirstSelect.setenable(true);
}

function btnFirstSelect_on_mouseup(objInst)
{
	screen.requestsubmit("TR_SELECT", true);

	btnFirstSelect.setenable(false);
}

function screen_on_submitcomplete(mapid, result, recv_userheader, recv_code, recv_msg)
{
	var row_count_per_page, max_row_count, max_page_no, mod_value;

	if (result != 1) {
		screen.alert("에러: " + recv_code + " - " + recv_msg);
		return;
	}

	// 시작 행 번호가 0인 경우
	if (DS_COND.getdatabyname(0, "start_row_no") == "0") {
		// 페이지당 행 갯수
		row_count_per_page = parseInt(DS_COND.getdatabyname(0, "row_count_per_page"), 10);

		// 최대 행 갯수
		max_row_count = parseInt(DS_COND.getdatabyname(0, "max_row_count"), 10);

		// 최대 페이지 수
		max_page_no = Math.ceil(max_row_count / row_count_per_page);

		// 페이지바의 최대 페이지 개수 설정
		pagBar.setmaxpagecount(max_page_no);
	}
}

// 페이지바 클릭 이벤트
function pagBar_on_pageclick(objInst, nClickPage)
{
	var row_count_per_page, max_row_count;

	row_count_per_page = parseInt(DS_COND.getdatabyname(0, "row_count_per_page"), 10);
	max_row_count = parseInt(DS_COND.getdatabyname(0, "max_row_count"), 10);

	// 조회 시작 행 번호 계산
	start_row_no = parseInt((nClickPage - 1), 10);
	if (start_row_no > 0) {
		start_row_no = start_row_no * row_count_per_page;
	}

	if (start_row_no >= max_row_count) {
		factory.consoleprint("end of massdata");
		return;
	}

	// linenumber_show 속성 사용시 라인넘버 offset 설정
	grdList.setlinenumberoffset(start_row_no);

	DS_COND.setdatabyname(0, "start_row_no", start_row_no);
	screen.requestsubmit("TR_SELECT", true);
}