javascript 带有数组数据的jqgrid中的分页问题

Pagination problem in jqgrid with array data

提问by Brij

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.

我在 jqgrid 中遇到分页问题，​​数组数据有 18 条记录，但即使我指定了 pagination:true,pager: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]);

回答by Oleg

You main problem is you should reset rowNumafter the adding the large number of rows. The line

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

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).

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

Some more small remarks:

还有一些小说明：

• in the definition of the mydataarray you should remove ',' before ']'.
• in the for loop you should use i<mydata.lengthinstead of i<=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 (like loadonce: true): pagination, page, loadonce, totalpages, totalrecords, showpage, imgpath.

• 在mydata数组的定义中，您应该在 ']' 之前删除 ','。
• 在 for 循环中，您应该使用i<mydata.length而不是i<=mydata.length.
• 您应该从 jqGrid 的定义中删除以下参数，这些参数要么不存在（如pagination），要么在上下文中没有意义（如loadonce: true）：pagination, page, loadonce, totalpages, totalrecords, showpage, imgpath。

You receive the best results if you constructs jqGrid with respect of data: myDataparameter, or set all data from mydataat once (see description of addRowDatamethod in http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data).

如果您根据data: myData参数构造 jqGrid或mydata一次设置所有数据，您将获得最佳结果（请参阅http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data 中的addRowData方法说明）。

回答by Chandima.Jayawickrema

Oleg is correct. Adding jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid"); works.

奥列格是对的。添加 jQuery("#list4").setGridParam({ rowNum: 10 }).trigger("reloadGrid"); 作品。

Although it might not work if formatterproperty is set where the rowObject values will be undefined.(if they are used)

尽管如果在 rowObject 值未定义的情况下设置了格式化程序属性，则它可能不起作用。（如果使用它们）

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