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(); 
}