jqgrid page navigation bar not appearing - jqgrid

Question

I am building search functionality in multi-tab where user search criteria will be one tab, and user search results will be in other tab. When I am searching first time, I got my results with proper page navigation bar in second tab. But when user goes back to previous tab(search tab) and search again my grid results are refreshed with proper values but my navgrid is not appearing. I could not find dom for navgrid in firebug as well where initially that dom present with first time search.
Following are the code snippets.
function dispSearchResults() {
var no = document.getElementById("stNo").value;
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var dateOfBirth = document.getElementById("dateOfBirth").value;
document.getElementById("searchContainerModal").innerHTML='<table
id="searchResultsTab" style="width:100%"></table>';
jQuery("#searchResultsTab").jqGrid({
url : contextPath + '/web/getSearchViewResults.json',
datatype : "json",
mtype: "POST",
postData:{'NO': no, 'FIRST_NAME':firstName, 'LAST_NAME':lastName,
'DATE_OF_BIRTH':dateOfBirth},
colNames : [ 'no', 'First Name', 'Last Name', 'Date Of Birth'],
colModel : [ {
name : 'No',
index : 'No',
width : 100,
align : "center",
formatter: fmtStateno
}, {
name : 'firstName',
index : 'firstName',
width : 220,
align : "left",
formatter: fmFName
}, {
name : 'lastName',
index : 'lastName',
width : 220,
align : "left",
formatter: fmLName
}, {
name : 'dateOfBirth',
index : 'dateOfBirth',
width : 120,
align : "left",
formatter: fmBirthDate
}],
altRows : true,
altClass : 'oddRow',
loadComplete : function() {
document.getElementById("sResultsTab").style.visibility =
"visible";
if (jQuery("#searchResultsTab").getGridParam("records")==0) {
jQuery("#searchResultsTab").addRowData(
"blankRow", {"No":"No data was found",
"firstName":"", "lastName":"", "dateOfBirth":""}
);
}else{
$("tr.jqgrow:odd").addClass('oddRow');
}
},
onCellSelect: function(rowid,iCol,cellcontent,e) {
// alert(rowid);
cContent = cellcontent;
rId = rowid;
},
height : 240,
width : 1165,
rowNum : 25,
rowList : [25,50,75,100],
loadonce: true,
pagination:true,
pager : '#searchPagerDiv1',
sortname : 'no',
viewrecords : true,
sortorder : "desc",
caption : "Search Results",
gridview : true,
jsonReader : {
root : "rows",
page : "currentPage",
total : "totalPages",
repeatitems : false,
id : "id"
}
}).navGrid("#searchPagerDiv1",reloadAfterSubmit: false,
{edit:false,add:false,del:false});
});
$("#tabs").tabs("select", "#searchResultsTb");
}
Here are the code snippets
main jsp for tabs
------------------
<div id="mainContentDiv"<
<div id="tabs" style="background-color: transparent; height:auto"<
<ul id="Tabs1"<
<li id="sCriteriaTab"<<a href="#searchTab"<Search Criteria </a<
</li<
<li id="sResultsTab"< <a href="#searchResultsTb"<Search
Results</a< </li<
</ul<
<div id="searchTab" style="background-color: transparent" class="height250"<
<%# include file="../search/SearchCriteria.jsp" % <
</div<
<div id="searchResultsTb" style="background-color: transparent;"<
<%# include file="../search/SearchResults.jsp" %
<
</div<
SearchCriteria.jsp
-------------------
<form id="searchForm" name="searchForm"<
<div class="personDetailsDiv" id="personNameInfoDiv"<
<div style="float:right"<
<font class="standardInputTitle"<no</font<
<input id="No" name="No" class="standardInputText marginRight50" value=""
type="text"<</div< </div<
........
............
<div class="button-row"<
<a href="javascript:dispSearchResults()" class="button rounded blue effect-
3"<Search</a<
</div<
</div< </form<
SearchResults.jsp
----------------
<div id="searchContainerModal" style="width:100%"<</div<
<div id="searchPagerDiv1"<</div<
<div id="searchPagerDiv" style="width:100%"<
<div id="searchZeroRec" style="display:none;"< Zero Records Found ...
</div<
</div<
Appreciate your help !!!!