我在具有18条记录的数组数据的jqgrid中遇到分页问题,但是即使我指定了pagination:true,pager:jQuery(’#pager1’),记录也不会显示在页面中。您能帮我实现分页而不是滚动吗?
<script type="text/javascript"> jQuery("#list4").jqGrid({ datatype: "clientSide", height: 200, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], multiselect: true, pagination:true, pager:jQuery('#pager1'), rowNum: 10, rowList: [5, 10, 20, 50], sortname: 'id', sortorder: 'asc', viewrecords: true, page: 1, loadonce: true, totalpages: 2, totalrecords:18, showpage:true, imgpath: "/themes/default/images", caption: "Manipulating Array Data" }); var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, ]; for(var i=0;i<=mydata.length;i++) jQuery("#list4").addRowData(i+1,mydata[i]);
您的主要问题是rowNum添加大量行后应重置。线
rowNum
jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
在代码末尾将解决此问题。我建议您添加行
jQuery("#list4").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});
直接在定义jqGrid之后。然后,您不仅将具有数据分页,还具有数据过滤(搜索)和刷新(重置过滤器)。
其他一些小注释:
mydata
i<mydata.length
i<=mydata.length
pagination
loadonce: true
page
loadonce
totalpages
totalrecords
showpage``imgpath
如果根据data: myData参数构造jqGrid 或mydata一次设置所有数据,则可获得最佳结果(请参见http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data中addRowData方法的说明))。
data: myData
addRowData