EasyUI DataGrid及Pagination

接上一篇EasyUI项目驱动学习

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

效果截图：

项目源码下载：http://download.csdn.net/detail/itmyhome/7609373

转载请注明出处：http://blog.csdn.net/itmyhome1990/article/details/37563551