EasyUI DataGrid及Pagination详解编程语言

接上一篇EasyUI项目驱动学习

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

 table id="dg" 

 thead 

 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" /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/blog.ytso.com/7609373

$("#dom_var_pagination").pagination( { 

 onSelectPage: function(pageNumber, pageSize){ 

 $(#dg).datagrid(load,{ 

 pagesize: pageSize, 

 currentPage: pageNumber 

 }); 

});

效果截图：

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

转载请注明出处：blog.ytso.com/article/details/37563551

14517.html