Data doesn't refresh on clicking on next button on 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.

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

0 Answers0