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",},

  ]，

}

 

 这样就能加载进去了，

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

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