Question

I’ve been working qith jqGrid 4.3.1, but I am using an additional javascript method to populate my results (it encapsulates the endpoint that returns the JSON).

Is there a way I could directly set the number of results, page number, and available pages in jQGrid and have it show up in the pager correctly? And than set the ‘arrows’ in the pager to trigger my ‘gridreload function()’?

Javascript:

$j('#searchResultsGrid').jqGrid({
        pager: '#gridpager',
        rowNum: 100,
        height: 415,
        width: 765,
        colNames: ['Action','First Name','Last Name','Email','Type of Record','Company','Account Name'],
        colModel: [
            {
            name:'Invite',
            index:'Invite', 
            width:50,
            align: 'center',
            sortable:false},
            {
            name: 'FirstName',
            index: 'FirstName',
            width: 75
            }, {
            name: 'LastName',
            index: 'LastName',
            width: 75
            },{
            name: 'Email',
            index: 'Email',
            width: 100
            },  {
            name: 'Type',
            index: 'Type',
            width: 75               
            },{
            name: 'Company',
            index: 'Company',
            width: 100              
            },{
            name: 'AccountName',
            index: 'AccountName',
            width: 100              
            }],
            //add the buttons for adding
        gridComplete: function(){
            ... 
            }
        }   
    });

/* Wrapper Method for Endpoint */
    methodController.searchLeadsContacts($j('#searchTerm').val(),pageNum,function(event,result){
            $j.each(result.result.searchResults, function(i, record){
              var rowData = [{
                'Id': record.Id,
                'FirstName': record.FirstName,
                'LastName': record.LastName,
                'Email': record.Email,
                'Type': record.Type,
                'Company': record.Company,
                'AccountName': record.AccountName
            }];
            $j('#searchResultsGrid').jqGrid('addRowData', record.Id, rowData[0]);
            });
            $j('#searchResultsGrid').setGridParam({ rowNum: 100 }).trigger("refresh");

HTML:

            <table id="searchResultsGrid"></table>
            <div id="gridpager"></div>  

Answer 1

You should never ever use old addRowData especially in loop. Additionally to the problem which you described addRowData is the slowest way to fill the grid because on every modification of the page the position of all existing elements on the page (even the previous added rows) should be recalculated.

What you should do is to use data parameter of jqGrid to create the grid with the data. If you would use gridview: true (my default option) than the contain of the grid will be placed in the grid in one operation.

Alternatively you can use datatype: 'jsonstring' and datastr with the data. In the case the value of the datastr can be object and not only JSON string.

If you load the data from the server and can use jQuery.ajax for the transfer of the data you should use datatype: 'json'. jqGrid gives you a lot of customization possibilities so you can implement practically and Ajax request which jqGrid makes for your internally.