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

<jQuery EasyUI最新版下载>

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

查看演示

建立数据网格

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

< 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：每页显示行

服务器端代码

$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的文章！