jqgrid default pagination not working with ajax and xml data - ajax

Question

I have created a jqgrid as follows:
$("#table_jqgrid").jqGrid({
autowidth: true,
shrinkToFit: true,
datatype: function(postdata) {
jQuery.ajax({
url: 'getxmlInfo',
data:postdata,
dataType:"xml",
complete: function(xmldata,stat){
debugger;
console.log(xmldata);
if(stat=="success") {
var thegrid = jQuery("#table_jqgrid")[0];
console.log(thegrid)
debugger;
thegrid.addXmlData(xmldata.responseXML);
}
}
});
},
colNames: ['col1', 'col2', 'col3', 'col4', 'col5', 'col6'],
colModel :[
{name: 'col1', index: 'col1', width: 60, sorttype: "int"},
{name: 'col2', index: 'col2', width: 90, sorttype: "date"},
{name: 'col3', index: 'col3', width: 100},
{name: 'col4', index: 'col14', width: 80, align: "right", sorttype: "float"},
{name: 'col5', index: 'col5', width: 80, align: "right", sorttype: "float"},
{name: 'col6', index: 'col6', width: 80, align: "right", sorttype: "float"}
],
pager: '#pager_jqgrid',
loadonce:true,
rowNum:10,
rowList:[10,20,30],
sortname: 'col1',
sortorder: 'desc',
rowTotal:40,
viewrecords: true,
});
Everything is working fine when changing records per page.But pagination is not correct.
getxmlInfo is a url to servlet function which returns corresponding xml as ajax response.
Initially page number is 1 and records/page is 10 then 10 rows will be shown.Is there any way to set total number of pages in jqgrid?
After a long search one link revealed there exists an option that is setting rowTotal parameter.But it is not working .How we can persist pagination data on each ajax call.Is there exists any solution to set totalrows on each ajax call.

Answer 1

I would strictly recommend you don't use datatype as function if you need make just an Ajax call to the server. More as 90% of the code which implements such feature uses it in a wrong way. Your code for example can send Ajax request only once in Internet Explorer because well known problem with caching of Ajax requests. You use additionally complete callback instead of "success", which is also not full correctly. The "notmodified" is an example of successful response too. You should never use jQuery.ajax if you are not a real specialist in the subject.
You should understated jqGrid also really good to be able to use datatype as function. You can find an example of the implementation in the answer. You can see that the code is not so short. The answer is written many years ago and it's not supports many features added in jqGrid later. The function datatype in jqGrid 4.5.3 and later for example contains 5 parameters. The function addXmlData which you try to call contains 5 parameters too. Your current implementation of datatype break some standard callbacks, for example loadComplete, loadError, beforeProcessing. Some features of jqGrid like virtual scrolling or frozen columns will be broken too.
I recommend you to replace datatype to
url: "getxmlInfo",
datatype: "xml"
I recommend you additionally remove all index properties from colModel. You use loadonce: true option which require to the index and name value are the same. You use for example name: 'col4', index: 'col14' which break the rule.
I strictly recommend you to add gridview: true option which will just improve performance of the loading of the grid. You should consider to use autoencode: true option if the XML data returned from the server don't contains HTML fragments which need be set in the cells of jqGrid.