你的位置:首页 > Java教程

[Java教程]jqGrid jqGrid分页参数


 

 

页面

 

<div class="ibox-content">              <div class="jqGrid_wrapper">                <table id="table_list_2"></table>                <div id="pager_list_2" style="width: 100%"></div>              </div>
</div>

 table_list_2    数据显示的地方                pager_list_2    表格下面的分页参数

 

js

 

$(document).ready(function(){    $.jgrid.defaults.styleUI="Bootstrap";     $("#table_list_2").jqGrid({        height:400,autowidth:true,shrinkToFit:true,         colNames:["代理商编号","状态","代理商名称","申请日期","代理商电话","操作员ID"],         colModel:[{name:"AGENTID",index:"AGENTID",width:60,align:"center"},             {name:"STATUS",index:"STATUS",width:90,align:"center"},             {name:"AGTNAM",index:"AGTNAM",width:100,align:"center"},             {name:"APPLYDAT",index:"APPLYDAT",width:80,align:"center"},             {name:"AGTTEL",index:"AGTTEL",width:80,align:"center"},             {name:"USER_ID",index:"USER_ID",width:80,align:"center"},             ],         pager:"#pager_list_2",    //就是上图pager中的位置 的id         viewrecords:true,hidegrid:false,         url:"<%=path %>/findAction", //后台处理的url  .action  .do         datatype:'json',        //返回数据格式         rownumbers: true,      //是否显示行号         rowNum : 10,         rowList : [ 10, 20, 30 ],  //选择每页显示的条数         jsonReader: {          //需要定义jsonReader来跟服务器端返回的数据做对应           root:"dataList", page:"currPage", total:"totalpages",           records:"totalCount", repeatitems:false, id : "id"         }              })  });

注意,jsonReader

需要定义jsonReader来跟服务器端返回的数据做对应

jsonReader的重要分页属性属性

root
包含实际数据的数组
page
当前页
total
总的页数
totalCount
总的记录数(查出来的总条数)
  

 

 

 

 

 

 

 

服务器返回的json格式

{totalpages: "xxx",   

currPage: "yyy",  

totalCount: "zzz",  

dataList: [  

{AGENTID:"1",STATUS:"1", AGTNAM:"1", APPLYDAT:"1", AGTTEL:"1", USER_ID:"1"},  

{AGENTID:"1",STATUS:"1", AGTNAM:"1", APPLYDAT:"1", AGTTEL:"1", USER_ID:"1"}

  ] 

}

 数据会通过 colModel 中的name 自动装填

 1.jqGrid|初始化|参

http://blog.mn886.net/jqGrid/

2.jqGrid colModel 参数

 http://blog.mn886.net/jqGrid/