jQuery EasyUI Data Grid - Add pagination component

This example demonstrates how to load data from the server, how to add tabs component (pagination) to the data grid (datagrid).

Creating a Data Grid (DataGrid)

To load data from a remote server, you should set the 'url' property in your server should return JSON formatted data. See Data Grid (datagrid) documentation for more data format information about it.

	<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 (datagrid) column, and set the 'pagination' property is true, it will generate a page (pagination) toolbar at the bottom of the data grid (datagrid) of. pagination will send two parameters to the server:

• page: page number starting value 1.
• rows: rows per page.

Server-side code

	? $ Page = isset ($ _ POST [ 'page']) intval ($ _ POST [ 'page']): 1;
	? $ Rows = isset ($ _ POST [ 'rows']) intval ($ _ POST [ 'rows']): 10;
	// /en.
	$ 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 jQuery EasyUI examples

jeasyui-datagrid-datagrid2.zip