Geek Answers Handbook

Pagination problem in jqgrid with array data

I ran into the pagination problem in jqgrid with array data having 18 records, but the records are not showing on the pages, even I indicated the pagination: true, pager: jQuery ('# pager1'). Can you please help me 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]);
+4
source share
2 answers

The main problem is that you have to reset rowNum after adding a lot of rows. Line

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

at the end of your code the problem will be fixed. I recommend you add a line

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

immediately after jqGrid definition. Then you will have not only data viewing, but also data filtering (search) and updating (reset filter).

Some more small remarks:

  • in the definition of the mydata array mydata you must remove the ',' before the ']'.
  • in a for loop you should use i<mydata.length instead of i<=mydata.length .
  • you should remove the following parameters from the jqGrid definition that either do not exist (e.g. pagination ) or do not make sense in the context (e.g. loadonce: true ): pagination , page , loadonce , totalpages , totalrecords , showpage , imgpath .

You get better results if you create jqGrid using the data: myData parameter or immediately set all the data from mydata (see the addRowData method addRowData at http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data# array_data ).

+10
source

Oleg is right. Adding jQuery ("# ​​list4"). SetGridParam ({rowNum: 10}). Trigger ("reloadGrid"); work.

Although this may not work if the formatting property is set, where the rowObject values ​​will be undefined. (if used)

Therefore, make sure that in your formatting method u always check their availability.

eg.

 function getFormattedFileName(cellvalue, options, rowObject) { if(!rowObject.fileName) {// this is due to ...trigger("reloadGrid"); return cellvalue; // the value is already formatted, let just return it } return rowObject.fileName.trim(); }
+1
source

More articles:


All Articles