jQuery EasyUI DataGrid - Setting Sorting
This example demonstrates how to sort the DataGrid by clicking the column headers.
All columns in the DataGrid can be sorted by clicking the column headers. You can define which columns are sortable. By default, columns are not sortable unless you set the sortable attribute to true.
Creating the DataGrid
<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
url="datagrid8_getdata.php"
title="Load Data" iconCls="icon-save"
rownumbers="true" pagination="true">
<thead>
<tr>
<th field="itemid" width="80" sortable="true">Item ID</th>
<th field="productid" width="80" sortable="true">Product ID</th>
<th field="listprice" width="80" align="right" sortable="true">List Price</th>
<th field="unitcost" width="80" align="right" sortable="true">Unit Cost</th>
<th field="attr1" width="150">Attribute</th>
<th field="status" width="60" align="center">Status</th>
</tr>
</thead>
</table>
We define some sortable columns, including itemid, productid, listprice, unitcost, etc. The attr1 and status columns are not sortable.
When sorting, the DataGrid will send two parameters to the remote server:
sort: The field name of the column to sort by.order: The sorting order, which can be 'asc' or 'desc', with 'asc' being the default.
Server-Side Code
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemid';
$order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';
$offset = ($page-1)*$rows;
$result = array();
include 'conn.php';
$rs = mysql_query("select count(*) from item");
$row = mysql_fetch_row($rs);
$result["total"] = $row[0];
$rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");
$items = array();
while($row = mysql_fetch_object($rs)){
array_push($items, $row);
}
$result["rows"] = $items;
echo json_encode($result);