The best jQuery EasyUI Data Grid - Add pagination component Tutorial In 2024, In this tutorial you can learn Download jQuery EasyUI examples,
This example demonstrates how to load data from the server, how to add tabs component (pagination) to the 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 = 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);