jQuery EasyUI Data Grid - set the sort
This example demonstrates how to sort the data grid (DataGrid) list by clicking on the header.
Data Grid (DataGrid) of all the columns by clicking on the header to sort the list. You can define which columns can be sorted. By default, the column can not be sorted unless you set the sortable property to true.
Creating a Data Grid (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"> Stauts </ th> </ Tr> </ Thead> </ Table>
We define some sortable columns contain itemid, productid, listprice, unitcost like. 'Attr1' column and the 'status' column can not be sorted.
When you sort the data grid (DataGrid) sends two arguments to the remote server:
- sort: sort the list of field names.
- order: Sort, may be 'asc' or 'desc', the default value is 'asc'.
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);