jqGrid 分页

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

  ]，

}

 

 这样就能加载进去了，

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

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