easyui中的datagrid分頁控制元件設定與數值獲取
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了.