接上一篇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