Pagination problem in jqgrid with array data
Solution 1
You main problem is you should reset rowNum
after the adding the large number of rows. The line
jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid");
at the end of your code will fix the problem. I recommend you to add the line
jQuery("#list4").jqGrid('navGrid','#pager1',{edit:false,add:false,del:false});
directly after the definition of the jqGrid. You will then have not only data paging, but also data filtering (searching) and refresh (reset filter).
Some more small remarks:
- in the definition of the
mydata
array you should remove ',' before ']'. - in the for loop you should use
i<mydata.length
instead ofi<=mydata.length
. - you should remove from the definition of jqGrid following parameters which are either non existent (like
pagination
) or have no sense in the context (likeloadonce: true
):pagination
,page
,loadonce
,totalpages
,totalrecords
,showpage
,imgpath
.
You receive the best results if you constructs jqGrid with respect of data: myData
parameter, or set all data from mydata
at once (see description of addRowData
method in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data).
Solution 2
Oleg is correct. Adding jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid"); works.
Although it might not work if formatter property is set where the rowObject values will be undefined.(if they are used)
Therefore make sure in your formatter method u always check for their availability.
e.g.
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();
}
Brij
"Don't be afraid to ask for help. It shows strength, not weakness"
Updated on June 04, 2022Comments
-
Brij almost 2 years
I am facing problem with pagination in jqgrid with array data having 18 records, but the records are not displaying in pages even I specified pagination:true,pager:jQuery('#pager1'). Can you please help me to implement pagination instead of scrolling.
<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]);