DataGrid数据表格及Pagination分页一起介绍

一、通过<table>标记创建DataGrid,嵌套<th>标签定义列表

<table id="dg" class="easyui-datagrid">	<thead>		<tr>			<th data-options="field:‘ck‘,checkbox:true"></th>			<th data-options="field:‘username‘,width:100">				名称			</th>			<th data-options="field:‘orgname‘,width:100">				组织机构			</th>			<th data-options="field:‘state‘,width:100">				状态			</th>			<th data-options="field:‘loginname‘,width:100">				登录名			</th>			<th data-options="field:‘ctime‘,width:100">				创建时间			</th>		</tr>	</thead></table><!-- 分页栏 --><div id="dom_var_pagination" class="easyui-pagination"></div>

二、加载数据表格

$("#dg").datagrid( {	url : ‘getUserAction.action‘,	closable : true,	checkOnSelect : true,	striped : true,	rownumbers : true,	‘toolbar‘ : ‘‘,	fitColumns : true,	loadFilter : function(data) {		var data_ = {			"rows" : data.resultList,  //行数据 			"total" : data.totalSize   //总记录数		}		$("#dom_var_pagination").pagination( {			total : data.totalSize		});		return data_;	}});

data.resultList 为后台返回的JSON格式的数据

如：[{id=1,loginname=zhangsan,username=zhangsan,state=可用, ctime=2014-01-01}]

再此后台代码就不再叙述,需要的话 可下载演示代码：http://download.csdn.net/detail/itmyhome/7609373

三、分页

$("#dom_var_pagination").pagination( {	onSelectPage: function(pageNumber, pageSize){ 	    $(‘#dg‘).datagrid(‘load‘,{		   pagesize: pageSize,		   currentPage: pageNumber	    });	}});

EasyUI DataGrid及Pagination