jEasyUI ajoute un composant de pagination

Cet exemple montre comment charger des données depuis le serveur et comment ajouter une pagination à la grille de données.

Créer DataGrid

Afin de charger des données depuis le côté serveur distant, vous devez définir l'attribut 'url', qui doit renvoyer les données au format JSON côté serveur. Consultez la documentation de la grille de données pour plus d'informations sur son format de données.

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

Nous définissons la colonne de la grille de données et définissons l'attribut 'pagination' sur true, ce qui générera une barre d'outils de pagination au bas de la grille de données. la pagination enverra deux paramètres au serveur :

• page : numéro de page, valeur de départ 1.

• lignes : Afficher les lignes par page.

Code côté serveur

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

Télécharger l'instance jQuery EasyUI

jeasyui-datagrid-datagrid2.zip