1. 程式人生 > >easyui中的datagrid分頁控制元件設定與數值獲取

easyui中的datagrid分頁控制元件設定與數值獲取

我對easyui+javaWeb中的分頁理解:

datagrid(資料網格)的分頁中 有一個附加的分頁控制元件,只需後臺獲取分頁控制元件自動提交的兩個引數rows(每頁顯示的資料條數)和page(當前頁碼)

然後讀取相應頁數的記錄,和總記錄數total一塊返回即可                     

js程式碼中,用於構建datagrid 要想顯示分頁控制元件,pagination屬性必須為true,js程式碼如下

$(function(){
//datagrid初始化 
   $('#dataList').datagrid({ 
       title:'學生列表', 
       iconCls:'icon-more',//圖示 
       border: true, 
       collapsible:false,//是否可摺疊的 
       fit: true,//自動大小 
       method: "post",
       url:"../../studentList?method=StudentList&t="+new Date().getTime(),
       idField:'id', 
       singleSelect:false,//是否單選 
       pagination:true,//分頁控制元件 ***************想要分頁此屬性為true
       rownumbers:true,//行號 
       sortName:'id',
       sortOrder:'DESC', 
       remoteSort: false,
       columns: [[  
{field:'chk',checkbox: true,width:50},
       {field:'id',title:'ID',width:50, sortable: true},    
       {field:'number',title:'學號',width:200, sortable: true},    
       {field:'name',title:'姓名',width:200},
       {field:'sex',title:'性別',width:100},
       {field:'phone',title:'電話',width:150},
       {field:'qq',title:'QQ',width:150},
       {field:'clazz',title:'班級',width:150, 
       formatter: function(value,row,index){
if (row.clazz){
return row.clazz.name;
} else {
return value;
}
}
},
       {field:'grade',title:'年級',width:150, 
formatter: function(value,row,index){
if (row.grade){
return row.grade.name;
} else {
return value;
}
}
      },
]], 
       toolbar: "#tb"
   }); 
   //設定分頁控制元件 ************具體的引數可以無使用預設的
   var p = $('#dataList').datagrid('getPager'); 
   $(p).pagination({ 
       pageSize: 10,//每頁顯示的記錄條數,預設為10 
       pageList: [10,20,30,50,100],//可以設定每頁記錄條數的列表 
       beforePageText: '第',//頁數文字框前顯示的漢字 
       afterPageText: '頁    共 {pages} 頁', 
       displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄', 
   }); 
})

例如Java中這樣獲取(因為這兩個屬性在easyui的介面程式碼上沒有明確給出,我查了資料才知道,這兩個屬性是分頁建立時自動給出的):


Page中:


這樣寫的好處是,可以直接用Page來封裝,並且很方便的呼叫start (獲取開始,來通過資料庫查詢例如Mysql中分頁Limit start , size)

最後將通過分頁查詢出來的資料和總頁數封裝到json資料裡返回頁面就OK了.