jQuery Grid Plugin - jqGrid

Hi All,

Thanks for the great product. I am very new to jQuery Grid and was able to understand about the jQuery Grid by reading the demo and examples from url: /blog/jqgrid/jqgrid.html

I created a simple code which loads the data from local array. When I try to set the navigator with page, it does not work correct first time when it loads the grid. It loads and displays all the data from the array even though I have the row limit per page is set to 5.

Could you please let me know how to solve this issue?

Thanks in advance,

Cynthia.

function loadData() {
 jQuery("#mylocallist").jqGrid({
  datatype: "local",
  height: 150,
  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,
  caption:"Local Data Test",
  rowNum:5,
  rowList:[5,10,20,50],
  viewrecords: true,
  loadonce: false,  // tried true value too
  pager: jQuery('#colch'),
  pginput:true,pgbuttons:true
 });
 
 $('#mylocallist').jqGrid('navGrid', '#colch',{add:false,edit:false,del:false,search:true,refresh:false});
 $('#mylocallist').jqGrid('gridResize', { minWidth: 400, maxWidth: 1200, minHeight: 25, maxHeight: 30, alsoResize:'.resize' });

 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-05-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"4230.00"},
   {id:"11",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"3220.00"},
   {id:"12",invdate:"2007-07-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"4310.00"},
   {id:"13",invdate:"2007-11-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"3210.00"}
   ];
   
 for(var i=0;i<=mydata.length;i++)
  jQuery("#mylocallist").jqGrid('addRowData',i+1,mydata[i]);
}

<table id="mylocallist"></table>
<div id="colch"></div>

It is shows the " Page 1 of 0 " and when I select 10 from the dropdown, it updates the grid with 10 rows. I want to display the data in the grid based on the page row limit.