jEasyUI가 페이징 구성요소를 추가합니다.

이 예제에서는 서버 측에서 데이터를 로드하는 방법과 페이징 구성 요소(페이지 매김)를 데이터 그리드(datagrid)에 추가하는 방법을 보여줍니다.

Create DataGrid

원격 서버 측에서 데이터를 로드하려면 서버 측에서 JSON 형식 데이터를 반환해야 하는 'url' 속성을 설정해야 합니다. 데이터 형식에 대한 자세한 내용은 DataGrid 설명서를 참조하세요.

	<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
			url="datagrid2_getdata.php"
			title="Load Data" iconCls="icon-save"
			rownumbers="true" pagination="true">
		<thead>
			<tr>
				<th field="itemid" width="80">Item ID</th>
				<th field="productid" width="80">Product ID</th>
				<th field="listprice" width="80" align="right">List Price</th>
				<th field="unitcost" width="80" align="right">Unit Cost</th>
				<th field="attr1" width="150">Attribute</th>
				<th field="status" width="60" align="center">Stauts</th>
			</tr>
		</thead>
	</table>

데이터 그리드 열을 정의하고 '페이지 매김' 속성을 true로 설정하면 데이터 그리드 하단에 페이지 매김 도구 모음이 생성됩니다. 페이지 매김은 두 개의 매개변수를 서버에 보냅니다:

• page: 페이지 번호, 시작 값 1.

• rows: 페이지당 행을 표시합니다.

서버측 코드

	$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
	$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
	// ...
	$rs = mysql_query("select count(*) from item");
	$row = mysql_fetch_row($rs);
	$result["total"] = $row[0];
	
	$rs = mysql_query("select * from item limit $offset,$rows");
	
	$items = array();
	while($row = mysql_fetch_object($rs)){
		array_push($items, $row);
	}
	$result["rows"] = $items;
	
	echo json_encode($result);

jQuery EasyUI 예제 다운로드

jeasyui-datagrid-datagrid2.zip