JqGrid: loading JSON data after local data is already in the table

Question

I have a very specific problem: I have a small form with four options. You can fill them out or not, and when you click "Ok", I load jqGrid with data depending on these parameters. But since I don’t know what my columns look like, I let my servlet generate the column model and column name; so I have to make an AJAX request to load the data, and then populate it in jqGrid as "local" data. I would like to use pagination.

So my question is: how to load more data into jqGrid after it is already installed through local data?

here is the code:

$.ajax({ type : 'GET', url : 'data.jsp', data : reqData, dataType : 'json', error: function() { $("#dialog-message").dialog("open"); $("#ajax-loader").css("display", "none"); }, success : function(result) { jQuery("#results").jqGrid({ data : result.rows, datatype : "local", colNames : result.columnNames, colModel : result.columnModel, pager : $('#pager'), rowNum : 1000, scroll : true, viewrecords : true, sortname : 'TITEL', width : window.innerWidth - 30, height : window.innerHeight - 190, altRows : true, loadError: function() { $("#dialog-message").dialog("open"); $("#ajax-loader").css("display", "none"); }, loadComplete: function() { $("#ajax-loader").css("display", "none"); } }).jqGrid("navGrid", "#pager", { edit: false, add: false, del: false, search: true, refresh: false }).jqGrid("gridResize"); } }); 

/ edit: I tried to do the following, but this still does not solve the problem, that the grid does not know how many pages are actually (actually, at that moment I don’t even know), and also, after loading, it considers that it receives only local data. Maybe an onScroll event or something else? I did not find it.

 datatype : !json ? "local" : function(postdata) { $.ajax({ type: 'GET', url: 'data.jsp', data: $.merge(postdata, reqData), dataType: 'json', success: function(data, status, jqXHR) { var mygrid = jQuery("#results")[0]; var myjsongrid = eval("("+jqXHR.responseText+")"); mygrid.addJSONData(myjsongrid); } }); }, 

Answer 1

Can't you do something like this ... get a grid, clear the data, determine the URL to receive the data (it may change depending on which option your user has selected), and then change the dataformat to json instead of local .

 var grid = $('#TargetGridID'); grid.clearGridData(); grid.setGridParam({ url: '../controller/action?datatype=Option1' }); grid.setGridParam({ datatype: 'json' }); grid.trigger('reloadGrid'); 

We use this methodology, and it works great ... use it with stored procedures that can pager, and grids are growing fast! I know that a grid of 20,000 rows takes about 700 ms, the number of pages is 500 rows.

If you use SQL for your data, I can download a sample of how to support paging in SQL Stored Proc, a very useful material.