jqGrid pagination problem

Question

I am using jqGrid. Pagination is not getting reflected, what could be the problem? I checked in Firefox 4.1 and IE8, but does not show jqGrid at all on chrome.

var filesystem=[];
$(xml).find('file').each(function(){ 
    var row={};
    row.total=$(this).attr('total');
    row.free=$(this).attr('free');
    row.used=$(this).attr('used');
    row.percentage=$(this).attr('percentage');
    filesystem.push(row);
});


$('#detailTable').empty();
$('<div>')
.attr('id','diskUsageSpan')
.html('<div class="titleBlue">Configuration&gt;System&gt;Disk Usage</div>'+
        '<table id="list1"></table>'+
        '<div id="gridpager"></div>'+
     '</div>')        
.appendTo('#detailTable');

Updated

jQuery("#list1").jqGrid({
    datatype: "clientSide",
    height: 250,
       colNames:['id','Total Space','Free Space', 'Used Space', 'Used Percentage'],
       colModel:[
           {name:'id',index:'id', width:90, align:"right"},
           {name:'total',index:'total', width:90, align:"right"},
           {name:'free',index:'free', width:90, align:"right"},
           {name:'used',index:'used', width:90, align:"right"},
           {name:'percentage',index:'percentage', width:120, align:"right"}
       ],
       pagination:true,
       pager : '#gridpager',
       rowNum:10,
    viewrecords: true,
    gridview: true,
    edit:false,
    add:false,
    del:false

});



for(var i=0;i<filesystem.length;i++)
    jQuery("#list1").jqGrid('addRowData',i+1,filesystem[i]);

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

@Tomas: I created a dataset to match jqGrid, and it loads also, but the pagination is not working. Can you please take a look. Thanks — , Jun 18 '11 at 09:05
@Oleg: I followed your answer [here](http://stackoverflow.com/questions/3491963/pagination-problem-in-jqgrid-with-array-data), but still no luck, can you look at the problem too. Thanks :) — , Jun 18 '11 at 09:06

score 1 · Accepted Answer · edited May 23 '17 at 10:08

The problem is that you should call reloadGrid after the addRowData sage and not before.

The best way would be to use data parameter instead:

var grid = jQuery("#list1");
grid.jqGrid({
    datatype: "local",
    data: filesystem, // here!!!
    height: "auto", // it can be better if you don't need the fix hight
    colNames: ['Total Space','Free Space', 'Used Space', 'Used Percentage'],
    colModel: [
        {name:'total',index:'total', width:90, align:"right"},
        {name:'free',index:'free', width:90, align:"right"},
        {name:'used',index:'used', width:90, align:"right"},
        {name:'percentage',index:'percentage', width:120, align:"right"}
    ],
    pager : '#gridpager',
    rowNum:10,
    rowList:[10,20,30],
    viewrecords: true,
    gridview: true
});
grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false});

No grid reloading is needed.

If you fill row for filesystem I would recommend you include additional id property in the row which will be used as the rowid. The value of ids of all HTML elements used on the page must be unique.

Instead of recreating of the div#detailTable contain like you do you can just call GridUnload (see here for an example). Are you really need recreate the grid and not just change the grid contain? To change the grid contain you can just set data parameter of jqGrid with respect of setGridParam and call .trigger("reloadGrid").

Ok I added a `ID`, but how do make it not appear in the table? — , Jun 18 '11 at 09:44
@Ricky : You are welcome! The property name must be `id` and not `ID`. You can use `localReader: {id: "ID"}` if you want to use another property name. The problem is that every `` element of the `` will receive the id. The `id` will **not displayed**, but in all events like [onSelectRow](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events#list_of_events) or in methods like [setSelection](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods) the grid rows will be identified by the rowid. You can use Developer Tools of IE or Chrome to examine the row contain and see ids. — Oleg, Jun 18 '11 at 09:59
Please check, why my id is still getting displayed, I updated my question — , Jun 18 '11 at 10:31

jqGrid pagination problem

1 Answers1