这两天一直在搞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",},

]，

}

这样就能加载进去了，

加载远程数据是异步方法，在执行过程中界面还可以操作，没有数据时没办法弹框报错

个人更新加载本地数据，先将数据从服务器上获取再加载，加载的方法可以封装，不用每次都写