EasyUI DataGrid及Pagination

標籤：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