jQuery Grid Plugin - jqGrid

I am trying to display jqgrid using json string. None of the pagination button works, Search does not work. 

Nothing happens when i click on the search or next buttons. How does server side pagination work on jqgrid, Is it possible to do client side pagination and search. I am using Struts2 to do this.

<script src="<s:url value="/script/jquery/ui/ui.core.js"/>" type="text/javascript"></script><script src="<s:url value="/script/jquery/ui/jquery-ui-1.7.2.custom.js"/>" type="text/javascript"></script><script src="<s:url value="/script/jquery/jqgrid/jquery.jqGrid.min.js"/>" type="text/javascript"></script><script src="<s:url value="/script/jquery/i18n/grid.locale-en.js"/>" type="text/javascript"></script><script src="<s:url value="/script/jquery/datepicker/jquery.ui.datepicker.js"/>" type="text/javascript"></script><script src="<s:url value="/script/jquery/jquery-1.3.2.min.js"/>" type="text/javascript"></script>

$(document).ready(function(){

$("body").css("font-size", "10px");

initJQGridPage();

$("#list").setGridHeight(320,true);

});

function initJQGridPage() {

var transmittedLoanJsonStr=jQuery("#transmittedReportJSONData").attr('value');

jQuery("#list").jqGrid({

url:'<s:url value="fundreports/TransmittedLoan.action?currPage=%{currPage+1}"/>',

datatype: 'jsonstring',

datastr:transmittedLoanJsonStr,

colNames:['First Name', 'Last Name','Grade Level','Academic Period'],

colModel :[

{name:'First Name', index:'FirstName', width:80},

{name:'Last Name', index:'LastName', width:80},

{name:'Grade Level', index:'GradeLevel', width:100, sortable:false},

{name:'Academic Period', index:'AcademicPeriod', width:100, sortable:false},

],

rowNum:10,

rowList:[10,20,30,40,50],

pager: '#pager',

sortname: 'FirstName',

viewrecords: true,

sortorder: 'asc',

caption: 'Reports'

});

//jQuery("#list").navGrid("#pager",{refresh: false, edit: false, add: false, del: false, search: true})

}