這兩天一直在搞jqGrid分頁，焦頭爛額，不過還是有點收獲的（主要是后台分頁）；
jqGrid分頁可以分為兩種，遠程數據（服務器數據）分頁和本地數據分頁，
先看遠程數據分頁：
$("#testGrid"）.jqGrid（{
mtype: "POST",
datatype: "json", //返回的是JSON格式的數據
pager: "#userListPg", //表格分頁
rowNum: 2, // 每頁多少行，用於分頁
rownumbers: true,//顯示行號
colModel ： userCM，// 自定義
jsonReader: {
id
: "id" //數據唯一值，
root: 'users', //加載的數據
page: 'page', //當前頁
total: 'total', // 很重要 定義了 后台返回的總頁數名稱。
records: 'records', // 后台返回的總數據條數； 以上5個參數一定要跟后台返回的json格式數據中，名稱相同
repeatitems: false,
},
onPaging: function (pageBtn) { //翻頁按鈕點擊事件，pageBtn 與 pager（表格分頁有關），為 next_ 加上分頁名
var re_page = $(this).getGridParam('page');//獲取返回的當前頁
var re_rowNum = $(this).getGridParam('rowNum');//獲取每頁數
if (pageBtn === "next_userListPg") {
queryFunc(re_page, re_rowNum);
}else if (pageBtn === "prev_userListPg") {
queryFunc(re_page, re_rowNum);
}else if (pageBtn === "last_userListPg") {
queryFunc(re_total, re_rowNum);
}else if (pageBtn === "first_userListPg") {
queryFunc(1, re_rowNum);
}
},
}）；
function queryFunc（cr_page，size） {
//加載數據：
$("#testGrid").jqGrid('setGridParam',{
url: "getUsr.do",
postData:{ page : cr_page, size : size, 'user_age' : 20}, //發送數據，查第一頁，只查2條（grid rowNum），找到所有20歲的人
}).trigger("reloadGrid");
}
后台返回數據：
{
page: "1", //當前頁
total: "3" //一共的頁數
records ："10",//總條數
users :[
{id:"1",user_name:"張三",age:"20",},
{id:"2",user_name:"李四",age:"20",},
]，
}
加載本地數據:
初始化grid：
$("#testGrid"）.jqGrid（{
mtype: "POST",
datatype: "local", //返回的是JSON格式的數據
pager: "#toolListPg", //表格分頁
rowNum: 2, // 每頁多少行，用於分頁
rownumbers: true,//顯示行號
colModel ： userCM，// 自定義
onPaging: function (pageBtn) { //翻頁按鈕點擊事件，pageBtn 與 pager（表格分頁有關），為 next_ 加上分頁名
var re_page = $(this).getGridParam('page');//獲取返回的當前頁
var re_rowNum = $(this).getGridParam('rowNum');//獲取每頁數
if (pageBtn === "next_userListPg") {
queryFunc(re_page, re_rowNum);
}else if (pageBtn === "prev_userListPg") {
queryFunc(re_page, re_rowNum);
}else if (pageBtn === "last_userListPg") {
queryFunc(re_total, re_rowNum);
}else if (pageBtn === "first_userListPg") {
queryFunc(1, re_rowNum);
}
},
}）；
function queryFunc（cr_page，size）{
$.aiax({
type:"post",
url : "getUsr.do",
data:{
page: cr_page,
size: size
user_age :20
},
async:false, //同步
success:function (data) {
data = JSON.parse(data)； //裝換成JSON格式
//加載數據
$("#testGrid"）.jqGrid('setGridParam', {
data :data.users,
localReader:{
root: function () {returndata.users},
page: function(object){ returndata.page},
total:function(object){ returndata.total},
records:function(object){ returndata.records},
repeatitems : false
},
}).trigger("reloadGrid");
}，
error : function(xhr, stat, e){
console.error(xhr);
}
});
}
本地數據：
data：{
page: "1", //當前頁
total: "3" //一共的頁數
records ："10",//總條數
users :[
{id:"1",user_name:"張三",age:"20",},
{id:"2",user_name:"李四",age:"20",},
]，
}
這樣就能加載進去了，
加載遠程數據是異步方法，在執行過程中界面還可以操作，沒有數據時沒辦法彈框報錯
個人更新加載本地數據，先將數據從服務器上獲取再加載，加載的方法可以封裝，不用每次都寫