jQuery EasyUI Data Grid - Add peddle components

jQuery EasyUI Data Grid - Add pedding components

You can add pagination components to the jQuery EasyUI data grid.

The following example shows how to load data from the server side and add peddling components to the data grid.

Create a data grid (DataGrid)

In order to load data from the remote server side, you should set the 'url' property and return JSON format data on your server side. Look at the data grid document for more information about its data format.

	<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>

We define the data grid column and set the 'pagination' property to true, which generates a pagination toolbar at the bottom of the data grid. The pagination sends two parameters to the server:

• page: Page number, starting value 1.
• Rows: Rows are displayed on each page.

Server-side code

	$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);

Download the jQuery EasyUI instance

jeasyui-datagrid-datagrid2.zip