jqgrid分页问题与阵列数据

Question

我面临jqgrid分页数据有18条记录，但即使我指定分页：页面：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]); 

Answer 1

您主要的问题是您应该在添加大量行后重置rowNum。该行

jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid"); 

在代码的末尾将解决该问题。我建议你添加这行

jQuery("#list4").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false}); 

直接定义jqGrid后。然后，您将不仅有数据分页，还有数据过滤（搜索）和刷新（重置过滤器）。

一些更小的话：

在 mydata前阵 ']' 你应该删除 '' 的定义
• 。
• 在for循环中，您应该使用i<mydata.length而不是i<=mydata.length。
• ，你应该从jqGrid的定义下列哪些是参数删除或者不存在（如pagination），或在上下文中没有意义（如loadonce: true）：pagination，page，loadonce，​​，totalrecords，showpage，imgpath。

您会收到最好的结果，如果你构建的jqGrid对于data: myData参数，或者一次设置从mydata所有数据（见addRowData方法的描述http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data）。

Answer 2

奥列格是正确的。 添加jQuery（“＃list4”）。setGridParam（{rowNum：10}）。trigger（“reloadGrid”）; 的作品。

虽然如果格式化属性设置在rowObject值将是不确定的，可能无法正常工作。（如果他们使用）

因此请确保您格式化方法U经常检查它们的可用性。

例如

function getFormattedFileName(cellvalue, options, rowObject) { 

     if(!rowObject.fileName) {// this is due to ...trigger("reloadGrid"); 
      return cellvalue; // the value is already formatted, let's just return it 
     } 
return rowObject.fileName.trim(); 
}