jQuery EasyUI Data Grid - Ajouter le composant de pagination

Cet exemple montre comment charger des données à partir du serveur, comment ajouter le composant d'onglets (pagination) à la grille de données (DataGrid).

Création d'une grille de données (DataGrid)

Pour charger des données à partir d'un serveur distant, vous devez définir la 'url' propriété dans votre serveur doit renvoyer des données au format JSON. Voir la grille de données (DataGrid) documentation pour plus d'informations sur le format de données à ce sujet.

	<Table id = classe "tt" style = "easyui-datagrid" = "width: 600px; height: 250px"
			url = "datagrid2_getdata.php"
			title = "iconCls de données de charge" = "icon-save"
			rownumbers = "true" pagination = "true">
		<Thead>
			<Tr>
				<Field Th = "itemid" width = "80"> ID de l'article </ th>
				<Field Th = "ProductID" width = "80"> ID de produit </ th>
				<Th field = largeur "ListPrice" = "80" align = "right"> Prix </ th>
				<Field Th = "unitcost" width = "80" align = "right"> Coût unitaire </ th>
				<Field Th = largeur "de attr1" = "150"> Attribut </ th>
				<Field Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Thead>
	</ Table>

Nous définissons la colonne Data Grid (DataGrid), et définir la propriété 'Pagination' est vrai, il va générer une barre d'outils Page (pagination) au bas de la grille de données (DataGrid) de. pagination enverra deux paramètres au serveur:

• page: numéro de page commençant valeur 1.
• lignes: lignes par page.

Le code côté serveur

	? $ Page = isset ($ _ POST [ 'page']) intval ($ _ POST [ 'page']): 1;
	? $ Rows = isset ($ _ POST [ 'lignes']) INTVAL ($ _ POST [ 'lignes']): 10;
	// fr.
	$ Rs = mysql_query ( "select count (*) à partir de l'article");
	$ Ligne = mysql_fetch_row (rs $);
	Résultat $ [ "total"] = $ row [0];
	
	$ Rs = mysql_query ( "select * from limite d'article $ offset, $ lignes");
	
	$ Articles = array ();
	while ($ row = mysql_fetch_object ($ rs)) {
		array_push ($ articles, $ ligne);
	}
	$ Résultat [ "lignes"] = $ Articles;
	
	json_encode echo ($ result);

Télécharger exemples jQuery EasyUI

jeasyui-datagrid-datagrid2.zip