AX5UI - GRID 6 (페이징)

그리드에서 페이징을 사용하는 방법을 알아봅니다. 먼저 실행된 화면 입니다.

 

 

그리드 좌측 하단에 페이징 정보가 보입니다. 우측 하단에는 현재 페이지내의 데이터중 어느 부분이 보이고 있다는 것을 나타냅니다.

 

테스트용 코드는 화면에서 조회 버튼을 누르면 조회된 데이터를 그리드에 넣는다는것을 가정해서 작성해 보았습니다.

 

 

1. 필요한 스크립트들을 로드합니다.

 

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/ax5ui/ax5ui-kernel/master/dist/ax5ui.all.min.js"></script>

 

2. 그리드 변수를 선언합니다.

 

그리드 객체를 나타내는 firstGrid 변수를 전역 변수로 선언합니다. 나중에 조회등의 작업에서 사용할 수 있어야 하기 때문입니다.

 

<script type="text/javascript">
var firstGrid = null;

$(function () {
	/* 그리드 객체 생성 */
	firstGrid = new ax5.ui.grid();
	...
});
</script>

 

3. 그리드 설정에 페이징 정보를 추가합니다.

 

page: {
	navigationItemCount: 9,
	height: 30,
	display: true,
	firstIcon: '|<',
	prevIcon: '<',
	nextIcon: '>',
	lastIcon: '>|',
	onChange: function () {
		search(this.page.selectPage);
	}
}

 

- navigationItemCount : 클릭할 수 있는 페이지 번호를 몇개 보여줄지 지정합니다.

- height : 페이징이 표시되는 하단 영역의 높이를 지정합니다.

- display : 페이징이 표시되는 하단 영역을 보여줄지 지정합니다. true 이면 보이고 false이면 감춰집니다.

- firstIcon : 첫 페이지로 가는 아이콘 입니다.

- prevIcon : 이전 페이지로 가는 아이콘 입니다.

- nextIcon : 다음 페이지로 가는 아이콘 입니다.

- lastIcon : 마지막 페이지로 가는 아이콘 입니다.

- onChange : 페이징 내의 숫자 또는 아이콘을 눌렀을때 실행될 함수를 지정합니다. 여기서 지정된 search(); 함수는 외부에 선언되어 있습니다.

- this.page.selectPage : 현재 클릭한 페이지 번호 입니다.(0 부터 시작합니다.)

 

 

4. 페이지 데이터를 조회해서 그리드에 입력하는 함수를 작성합니다.

 

이 함수는 조회버튼을 클릭할때 호출되고, 그리드의 페이지번호를 클릭할 때도 호출됩니다.

 

function search(_pageNo) {
	var list = [];

	for (var i = 0; i < 10; i++) {
		list.push({date: "20170102", type: "R", amount: 25, mileage: (i + 1) * 100, price: 45000, repair: "-", complete: "true" ,note: "-"});
	}

	firstGrid.setData({
		list: list,
		page: {
			currentPage: _pageNo,
			pageSize: 10,
			totalElements: 500,
			totalPages: 50
		}
	});
}

 

- list :  그리드에 뿌려질 데이터입니다.

- currentPage : 현재 페이지입니다.

- pageSize : 한 페이지의 데이터 갯수일 것으로 보입니다.

- totalElements : 전체 데이터 갯수 입니다.

- totalPages : 전체 페이지 갯수일 것으로 보입니다.

 

pageSize와 totalPages는 어디에 사용되는지 알 수 없었습니다.

 

※전체소스

paging.zip

다운로드