Using jgGrid with API(providing local data) for search/paging

We are developing a javascript application. This application will be using jqGrid for its grid rendering purpose. We have javascript "API" available which provides functionality to bring in the data from the server.

The API provides data in JSON format, this data contains information like: {totalResults, pageNumber, nrRecords, the actual array of rows}

Now we need to populate the jqGrid using this API. So, we wont be using the url property of the grid. We also want the pagination/search to work using the API available. This API has functions which take searchParams as argument and return data from the server after applying the searchParams.

Whatever study we did on jqGrid, we couldnt find a way to integrate this API with jqGrid. We tried by doing this so far:

$('#grid').jqGrid({
    data: this.gridData, // Initial data returned by the API in JSON format, suppose 5 rows
    datatype: "local",
    colNames:['Id', 'Name'], 
    colModel:[ {name:'id', index:'id', width:20}, 
               {name:'firstName', index:'firstName', width:80}, 
             ]
    onPaging: function (pgButton) {
                // Use the API to get the next page data and populat开发者_Go百科e the jqGrid
    }
    rowNum: this.gridData.length,
    rowTotal: this.getTotalGridLength, // This part is not working!!
)};

In the above, we are getting the grid with 5 rows only and the next button is not active. How do we set the total count of rows (this.getTotalGridLength) so when the user clicks on next, we get the new data in the onPaging function and replace the grid accordingly?

This is the first hurdle, we also need to make search/filter work using the same API.