SpServices with JqGrid in Page Load SharePoint

Here is code to display SPServices getlistitems in JqGrid SharePoint page load event.Here is the code. here my list name is ProjectDetails.

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<SharePoint:CssRegistration Name="default" runat="server"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"></style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-el.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script></script>
<script>
$(document).ready(function() {
var mydata;
var JqData1=[];
GetMyData();
function ForGettingUserName() {
var userName = $().SPServices.SPGetCurrentUser({
fieldName : "Title",
debug : false
});
return userName;
}
function GetMyData() {
ForGettingUserName();
sortIdexName = jQuery("#list").getGridParam("sortname"); //Maintaining Consitant SortName after the Sortcol event
sortOrderName = jQuery("#list").getGridParam("sortorder"); //Maintaining Consistant Sort Order
Query = "
<Query>
<Where>
<Eq>
<FieldRef Name='ApprovalStatus' />
<Value Type='Text'>Pending</Value>
</Eq>
</Where>
</Query>";
//Query = GetTheOrderByType(sortIdexName, sortOrderName);
var CAMLViewFields ="
<ViewFields>"+"
<FieldRef Name='ProjectId' />"+
"
<FieldRef Name='ProjectName' />
<FieldRef Name='DeliveryManager' />
<FieldRef Name='ApprovalStatus' />
</ViewFields>"
GetDataOnLoad(Query, CAMLViewFields);
}
//Function for Getting the Query Type and the particular WHERE CLAUSE TO send the Query to GetListItem function
/*function GetTheOrderByType(index, sortOrder, userName) {
var OrderByType;
if (index == "ProjectName") {
if (sortOrder == "desc") {
OrderByType = "
<Query>" +
+ "
<Where>
<Or>" + "
<Eq>" + "
<FieldRef Name='deliveryManager'/>
<Value Type='Text'>"
+ userName + "</Value>" + "
</Eq>"
+ "
<Eq>
<FieldRef Name='projectManager'/>
<Value Type='Text'>"
+ userName + "</Value>
</Eq>" + "
</Or>
</Where>" +
+ "
<OrderBy>
<FieldRef Name='projectName' Ascending='FALSE' />
</OrderBy>" +
+ "
</Query>";
} else {
OrderByType = "
<Query>" +
+ "
<Where>
<Or>" + "
<Eq>" + "
<FieldRef Name='deliveryManager'/>
<Value Type='Text'>"
+ userName + "</Value>" + "
</Eq>"
+ "
<Eq>
<FieldRef Name='projectManager'/>
<Value Type='Text'>"
+ userName + "</Value>
</Eq>" + "
</Or>
</Where>" +
+ "
<OrderBy>
<FieldRef Name='projectName' Ascending='FALSE' />
</OrderBy>" +
+ "
</Query>";
}
} else if (index == "ApprovalStatus") {
if (sortOrder == "desc") {
OrderByType = "
<Query>" +
+ "
<Where>
<Or>" + "
<Eq>" + "
<FieldRef Name='deliveryManager'/>
<Value Type='Text'>"
+ userName + "</Value>" + "
</Eq>"
+ "
<Eq>
<FieldRef Name='projectManager'/>
<Value Type='Text'>"
+ userName + "</Value>
</Eq>" + "
</Or>
</Where>" +
+ "
<OrderBy>
<FieldRef Name='approvalStatus' Ascending='FALSE' />
</OrderBy>" +
+ "
</Query>";
} else {
OrderByType = "
<Query>" +
+ "
<Where>
<Or>" + "
<Eq>" + "
<FieldRef Name='deliveryManager'/>
<Value Type='Text'>"
+ userName + "</Value>" + "
</Eq>"
+ "
<Eq>
<FieldRef Name='projectManager'/>
<Value Type='Text'>"
+ userName + "</Value>
</Eq>" + "
</Or>
</Where>" +
+ "
<OrderBy>
<FieldRef Name='approvalStatus' Ascending='FALSE' />
</OrderBy>" +
+ "
</Query>";
}
return OrderByType;
}
}*/
//This function gets the data from List using SpServices
function GetDataOnLoad(Query, CAMLViewFields) {
$().SPServices({
operation : "GetListItems",
async : false,
listName : "ProjectDetails",
CAMLQuery : Query,
CAMLViewFields : CAMLViewFields,
completefunc : processResult
});
}
//Processing the XML result to formatted Json so that We can bind data to grid in Json format
function processResult(xData, status) {
var counter = 0; // Gets the total number of records retrieved from the list (We can also use xData.ItemCount method for counting the number of rows in the data )
var newJqData = "";
alert(xData.responseText);
$(xData.responseXML).SPFilterNode("z:row").each(function () {
var JqData={};
if (counter == 0) {
JqData.PID= $(this).attr("ows_ID");
JqData.PName=$(this).attr("ows_ProjectName");
JqData.PManager=$(this).attr("ows_DeliveryManager");
JqData.PStatus=$(this).attr("ows_ApprovalStatus");
counter = counter + 1;
} else {
JqData.PID= $(this).attr("ows_ID");
JqData.PName=$(this).attr("ows_ProjectName");
JqData.PManager=$(this).attr("ows_DeliveryManager");
JqData.PStatus=$(this).attr("ows_ApprovalStatus");
counter = counter + 1;
}
JqData1.push(JqData);
});
//];
// FinalDataForGrid(newJqData, counter);
}
/*
function FinalDataForGrid(jqData, resultCount) {
dataFromList = jqData;
//var a;
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 //formatting rows
newStr = "{total:" + '"' + 1 + '"' + "," + "page:" + '"' + 1 + '"' + ","
+ "records:" + '"'
+ resultCount + '"' + ","
+ "rows:"
+ "[" + dataFromList + "]}";
alert(newStr );
var a = jQuery("#list")[0];
a.addJSONData(newStr); //Binding data to the grid which is of JSON Format
//jQuery("#list").addJSONData(newStr);
}
*/
//var a = jQuery("#list")[0];
jQuery("#list").jqGrid({
data: JqData1,
datatype: "local",
height: 150,
width:900,
hidegrid: false,
colNames: ['PID', 'PName','PManager','PStatus'],
colModel: [
{ name: 'PID', index: 'PID', width: 100, align: "center", sorttype: 'int' },
{ name: 'PName', index: 'PName', width: 100, align: "left" },
{ name: 'PManager', index: 'PManager', width: 100, align: "left" },
{ name: 'PStatus', index: 'PStatus', width: 100, align: "left" }
],
pager: true,
pager: '#pager',
pageinput: true,
rowNum: 5,
rowList: [5, 10, 20, 50, 100],
sortname: 'ApprovalStatus',
sortorder: "asc",
viewrecords: true,
autowidth: true,
emptyrecords: "No records to view",
loadtext: "Loading..."
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: false, add: false, del: false, search: true, refresh: true });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id='tblMain' style="float:left;width:600px">
<table id="list" ></table>
<div id="pager" style="text-align:center;"></div>
</div>
</form>
</body>