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");

Answer 1

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