Rebooting 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} ] }); } 

First, I call it with limit = 1, and it calls the server and returns the correct data. Then I call it with limit = 2, and it just restarts the previous ajax call (with limit = 1) and returns the same data, of course.

Why does postData strong> really not change? I see in fireBug that "limit" has the correct value.

Answer 1

Or on reboot, you can use setGridParam to reset postData ,

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

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

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

Answer 2

I'm not sure that a design with such data caching is good, but nonetheless your current problem is understandable.

It is important to understand that the challenge

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

creates a grid . It converts an empty <table id="list"></table> into a very complex structure of divs and tables. Therefore, you can create a grid only once .

A grid consists of many parts (for example, headers) that do not need to be recreated the next time the grid is filled. Thus, jqGrid provides a reloadGrid event that can be fired to replenish the mesh body. If jqGrid has postData with some value like

 postData: { limit: limitVar } 

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

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

In case you have the current value of limitVar as the value of the limit parameter of the URL. By the way, if the user just clicks on the column heading, it is necessary to sort the grid, and jqGrid will make a new HTTP request for url . If you use function inside postData , then you will also have the current value of limitVar .

If you make fewer changes to your existing code, you can replace the line $("#list").trigger("reloadGrid"); (which is absolutely not needed in the current code) on

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

It will destroy the previously created dive and table structure (which build the grid) and create an empty <table id="list"></table> in the same place. This way you can recreate the grid. Such code will not work as efficiently, but it can be very useful in some scenarios (see the answer and this one for example).