jQuery EasyUI DataGrid - Add Pagination Component
This example demonstrates how to load data from the server and how to add a pagination component to the datagrid.
Create DataGrid
To load data from a remote server, you should set the 'url' property, and your server should return data in JSON format. Refer to the datagrid documentation for more information on 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">Status</th>
</tr>
</thead>
</table>
We define the datagrid columns and set the 'pagination' property to true, which will generate a pagination toolbar at the bottom of the datagrid. Pagination sends two parameters to the server:
page: The page number, starting from 1.
rows: The number of rows to display per 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);