jQuery EasyUI使用教程之在数据网格中添加一个分页

<jQuery EasyUI最新版下载>

本教程中涉及的示例演示了如何从服务器端加载数据，如何添加分页组件到数据网格中。

查看演示

创建数据网格

想要从远程服务器端加载数据，首先你应该设置“URL”属性，服务器端会返回JSON格式的数据。查看数据文档可获得更多的数据格式信息。

1 2 3 4 5 6 7 8 9 10 11 12

< 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 >

我们定义数据网格列，并设置“pagination”属性为true，因此在数据网格的底部会生成一个分页工具栏。pagination将发送两个参数到服务器：

• page：页码，起始值 1
• rows：每页显示行

服务器端代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$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);

下载该EasyUI示例：easyui-datagrid-demo.zip

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！