Reload jqGrid with new data

Question

I have this simple function

function createGrid(limit){
    $("#list").trigger("reloadGrid"); 
    $("#list").jqGrid({
        url:indexObj.gridUrl,
        postData:{
            "limit":limit
        },
        datatype: "json",
        colNames:['ID','type','folder','Description'],
        colModel:[
            {name:'id',index:'id', width:50},
            {name:'type',index:'type', width:100},
            {name:'folder_id',index:'folder_id', width:100},
            {name:'description',index:'description', width:200} 
        ]
    });
}

I first call it with limit = 1 and it calls the server and returns the right data. Then I call it with limit = 2 and it just reruns the previous ajax call (with limit=1) and returns the same data of course.

Why postData doesn't actually change? I see in fireBug that "limit" does have the correct value.

Answer 1

Or while reloading you can use setGridParam for resetting postData,

$("#list").jqGrid('setGridParam', { 
        postData: {"limit":limit }
 }).trigger('reloadGrid'); 

And, you don't need to reinitialize/create jqGrid but you can simply use:

function createGrid(limit){
    $("#list").trigger("reloadGrid"); 
    #Code Goes here#
}

Answer 2

I'm not sure that the construct with such caching of the data is good, but nevertheless your current problem is clear.

It's important to understand that the call

$("#list").jqGrid({
    url:indexObj.gridUrl,
    ...
});

creates the grid. It converts empty <table id="list"></table> in very complex structure of divs and tables. So one can create the grid only once.

The grid consist from many parts (like headers) which don't need be recreated on the next filling of the grid. So jqGrid provides reloadGrid event which can be triggered to refill the body of the grid. If jqGrid have postData with some value like

postData: {
    limit: limitVar
}

then if means that the object value of postData will be created and initialized once with the current value of limitVar variable. If you have outer variable (global, or defined in some outer scope) then you can use

postData: {
    limit: function () { return limitVar; }
}

In the case you will have the current value of limitVar as the value of limit parameter of URL. By the way if the user just click on the column header, the grid need be sorted and jqGrid will make new HTTP request to url. If you use function inside of postData then you will have the current value of limitVar in the cases too.

If you will make less modification in your existing code then you can replace the line $("#list").trigger("reloadGrid"); (which is absolutely unneeded in the current code) to

$("#list").jqGrid("GridUnload");

It will destroy previously created structure of dives and tables (which build the grid) and creates an empty <table id="list"></table> on the same place. So you can recreate the grid. Such code will work not so effectively, but it could be very helpful in some scenarios (see the answer and this one for example).