接上一篇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_; }});

如：[{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