Data doesn't refresh on clicking on next button on Jqgrid - jqgrid

Question

<script language="javascript" type="text/javascript" src="/SiteAssets/test%20js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/JqLib/i18n/grid.locale-en.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/JqLib/jquery.jqGrid.min.js"></script>
<script language="javascript" type="text/javascript" src="/SiteAssets/JqLib/jquery.SPServices-0.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20150503/json2.min.js"></script>
<link rel="stylesheet" href="/SiteAssets/styles/ui.jqgrid.css">
<link rel="stylesheet" href="/SiteAssets/styles/ui-lightness/jquery-ui-1.7.3.custom.css">
<script language="javascript" type="text/javascript">
$(document).ready(function() {
debugger;
jQuery("#list").jqGrid({
datatype: GetMyData,
colNames:["ID","Title","Description"],
colModel:[{name:'ID',index:'ID',align:'left',sortable: true,width:"1500px"},
{name:'Title',index:'Title',align:'left',sortable: true, width:"1500px"},
{name:'Description',index:'Description',align:'left',sortable:true, width:"1500px"},],
pager: true,
pager: '#pager',
pageinput: true,
rowNum: 5,
rowList: [5, 10, 20, 50, 100],
sortname: 'ID',
sortorder: "asc",
viewrecords: true,
autowidth: true,
emptyrecords: "No records to view",
loadonce: true,
loadtext: "Loading..."
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false, search: true, refresh: true }); });
function GetMyData(){
var ex='e';
Query="<Query><Where><Or><Contains><FieldRef Name='Title'/><Value Type='Text'>"+ex+"</Value></Contains><Contains><FieldRef Name='Description' />"+"<Value Type='Text'>"+ex+"</Value></Contains></Or></Where></Query>";
var CAMLViewFields="<ViewFields><FieldRef Name='Title'/><FieldRef Name='Description'/> <FieldRef Name='ID'/></ViewFields>";
GetDataOnLoad(Query, CAMLViewFields);
}
function GetDataOnLoad(Query, CAMLViewFields) {
$().SPServices({
operation: "GetListItems",
async: false,
listName: "List1",
CAMLQuery:Query,
CAMLViewFields:CAMLViewFields ,
completefunc: processResult
});
}
function processResult(xData, status) {
var counter = 0;
var newJqData = "";
debugger;
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var JqData;
if (counter == 0) {
JqData="{"+'"id"'+":"+'"'+$(this).attr("ows_ID")+'",'+'"cell"'+":["+'"'+$(this).attr("ows_ID")+'",'+ '"'+$(this).attr("ows_Title")+'",'+ '"'
+$(this).attr("ows_Description")+'"'+"]}";
newJqData = newJqData + JqData;
counter = counter + 1;
} else {
var JqData="{"+'"id"'+":"+'"'+$(this).attr("ows_ID")+'",'+'"cell"'+":["+'"'+$(this).attr("ows_ID")+'",'+ '"'+$(this).attr("ows_Title")+'",'
+ '"'+$(this).attr("ows_Description")+'"'+"]}";
newJqData = newJqData +","+ JqData;
counter = counter + 1;
}
});
FinalDataForGrid(newJqData, counter);
}
function FinalDataForGrid(jqData, resultCount) {
debugger;
dataFromList = jqData.substring(0, jqData.length - 1);
var currentValue = jQuery("#list").getGridParam('rowNum');
var totalPages = Math.ceil(resultCount / currentValue);
var PageNumber = jQuery("#list").getGridParam("page"); // Current page number selected in the selection box of the JqGrid
newStr = "{"+'"total":'+'"'+totalPages+'",'+'"page":'+'"'+PageNumber+'",'+'"records":'+'"'+resultCount+'",'+'"rows":['+dataFromList+ "}]}";
var thegrid = jQuery("#list")[0];
var obj=JSON.stringify(newStr);
thegrid.addJSONData(JSON.parse(newStr));
}
</script>
<table id="list" width="100%" ></table>
<div id="pager" style="text-align:center;"></div>
I want to display data from SharePoint List using CAML Query, SPServices and JQGrid.
The data gets binded to the grid, I can see Page 1 of 2 and View 1-5 of 10. But When I click on next button, then Page 2 of 2 shows and view 6-10 of 10 shows up but data doesnt change. I am new to jqgrid, faced many issues even to bind grid, all are resolved right now except for pagination.