EasyUI DataGrid及Pagination

Posted 芜明-追星

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EasyUI DataGrid及Pagination相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

EasyUI表格DataGrid假分页及获取表格数据

jquery easyui datagrid 在翻页以后仍能记录被选中的行及刷新设置选中行数据

EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

EasyUI datagrid 明细表格中编辑框 事件绑定 及灵活计算 可根据此思路 扩展其他

Jquery EasyUI datagrid后台数据表格生成及分页详解

easyui datagrid行中点击a标签链接,行被选中,但是获取不到对应的参数