jqGrid: Load JSON data after local data already in table

Question

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

Thus my question: How may I load more data into a jqGrid after it is already established through local data?

here's 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've tried to do the following, but that still doesn't solve the problem that the grid doesn't know how many total pages there actually are (actually, at that point, I don't even know), and also, after loading, it thinks it only gets local data. Is there maybe an onScroll event or something? I haven't found one.

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 you not do something like this...get the grid, clear the data, define the url to get the data from (it may change depending on what option your user 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 this with stored procedures capable of paging and the grids are blazing fast! I know a 20,000 row grid takes us roughly 700ms with a page count of 500 rows.

If you are using SQL for your data I can upload a sample on how to support paging in a SQL Stored Proc, very useful stuff.