页面
<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/
原标题:jqGrid jqGrid分页参数
关键词:分页