EasyUI學習筆記---Datagrid真分頁

EasyUI Datagrid組件在我看來功能還是很強大的，在我使用過程中遇到分頁請求的問題困擾了一天才解決，下面我就把我遇到的問題分享一下

//datagrid數據表格渲染

$("#dg").datagrid({
loader: function(param, success, error) {
var pageNumber = param.page;
var pageSize = param.rows;
$.ajax({
type: "get",
url: url,
dataType: 'jsonp',
data: "pageNum=" + pageNumber + "&pageSize=" + pageSize,
success: function(data) {
if(data.code == 0) {
var arr = data.result.content;
$("#dg").datagrid('loadData', { total: data.result.page.totalRecord, rows: arr })
}
},
error: function() {
error.apply(this, arguments);
}
});
}
})

 

傳入的參數有param, success, error可選

這里我主要用到了param，param有param.page（頁碼）和param.rows（每頁顯示行數）兩個屬性，由於頁面載入之后就要進行查詢，所以這個參數是必須的；

一 遇到的第一個問題是跨域，這個在之前的文章有些過，這里就不贅述了；

二 其次就是請求回的數據怎么渲染到表格中，由於是真分頁，所以每次查詢的數據只是當前頁面的數據，並不是所有的數據，但是頁腳顯示數據總數必須是所有數據，這樣才能就行分頁。

最后通過查看資料發現，loadData方法可以傳入一個json格式的數據$("#dg").datagrid('loadData', { total: data.result.page.totalRecord, rows: arr })，這樣就解決了數據渲染分頁請求的問題

三 由於我啟用了loadMsg屬性，即在請求后台數據的時候會顯示正在加載的狀態，但是請求成功之后此狀態並未隱藏，最后通過設置

onLoadSuccess: function(data) {
//查詢成功是隱藏正在加載狀態。
$(this).datagrid("loaded");
}

在數據加載成功之后隱藏正在加載狀態

四 點擊下一頁進行查詢

//點擊下一頁
$('#dg').datagrid('getPager').pagination({
//刷新按鈕執行的操作
onBeforeRefresh: function() {},
onSelectPage: function(pageNumber, pageSize) {
$("#dg").datagrid('loading'); //顯示加載信息
$.ajax({
type: "get",
url: url,
dataType: 'jsonp',
data: "pageNum=" + pageNumber + "&pageSize=" + pageSize ,
success: function(data) {
if(data.code == 0) {
//數據返回成功后填充到表格中
var arr = data.result.content;
$("#dg").datagrid('loadData', { total: data.result.page.totalRecord, rows: arr })
}
},
error: function() {
error.apply(this, arguments);
}
})
}
});