Problem with jqGrid pager after adding row with addRowData

Question

var index = 'id'; var ajaxResponse = [{id: 1, name: 'John', email: ' [e-mail] '}, {id: 2, name: 'Michael', email: ' [e-mail] '}]; $('#grid').addRowData(index, ajaxResponse); 

After adding several lines one by one, the pager does not adhere to the page limit, as well as the message page of pager 1 of 0.

After I clicked the refresh button from the grid footer, I see the correct number of lines per page and the correct number of pages.

Any ideas on how to fix it?

Thanks.

Answer 1

You have not posted the full code that you are using. Therefore, I can only guess what you are doing.

If you have ajaxResponse full data that you use to fill the grid, you can create a data grid. You can use data: ajaxResponse along with gridview: true . In the case when the entire grid will be created immediately:

 var mydata = [ {id: 1, name: 'John', email: ' [e-mail] '}, {id: 2, name: 'Michael', email: ' [e-mail] '} ]; $("#list").jqGrid({ datatype: 'local', data: mydata, colNames: ['Name', 'E-Mail'], colModel: [ {name: 'name', width: 100}, {name: 'email', width: 150} ], rowNum: 5, rowList: [5, 10, 20], pager: '#pager', gridview: true, rownumbers: true, sortname: 'name', sortorder: 'desc', caption: 'Just simple local grid', height: 'auto' }); 

(see demo here )

If you receive data from the server in JSON format, for example,

 [ {"id": 1, "name": "John", "email": " [e-mail] "}, {"id": 2, "name": "Michael", "email": " michael@e xample.com"} ] 

you can set the url parameter to the url of the server that provides the data and use

 $("#list").jqGrid({ url: 'Nicolae2.json', datatype: 'json', jsonReader: { repeatitems: false, root: function (obj) { return obj; }, page: function () { return 1; }, total: function () { return 1; }, records: function (obj) { return obj.length; } }, loadonce: true, colNames: ['Name', 'E-Mail'], colModel: [ {name: 'name', width: 100}, {name: 'email', width: 150} ], rowNum: 5, rowList: [5, 10, 20], pager: '#pager', gridview: true, rownumbers: true, sortname: 'name', sortorder: 'asc', caption: 'Just simple local grid', height: 'auto' }); 

to populate the grid on Ajax directly from the server. The only limitation is that you have to provide correctly sorted data. So I changed sortorder: 'desc' from the previous example to sortorder: 'asc' . See the second demo here .

Answer 2

Updating a call after adding a jQuery("#grid").trigger("reloadGrid"); row jQuery("#grid").trigger("reloadGrid");