jQuery Grid Plugin - jqGrid

Hi... I am beginner and I need some help for getting jqgrid to work. I got it to display my tables and stuff. The thing is that I am stuck from here on. I need help on how to search and edit data. I saw the demo of jqgrid and the form editing and searching looks amazing.....It would be nice if someone could help me with this...

This is my code

<table id="list1"></table> 
<div id="pager1"></div> 
<br/> 
<br/> 

<script type="text/javascript"> 
jQuery().ready(function (){
jQuery("#list1").jqGrid({
url:'ictjobrequests.php',
datatype: "xml",
colNames:['ID','Date', 'Ext','IP','Type','Department','Username','Description','Order No.','Status'],
colModel :[ 
{name:'cf_id', index:'cf_id', width:55}, 
{name:'recordtime', index:'recordtime', width:150}, 
{name:'ext_number', index:'ext_number', width:50, align:'right'}, 
{name:'ipaddress', index:'ipaddress', width:80, align:'right'}, 
{name:'problem_type', index:'problem_type', width:80, align:'right'},
{name:'department', index:'department', width:120, align:'right'},
{name:'username', index:'username', width:100, align:'right'}, 
{name:'problem_description', index:'problem_description', width:200, sortable:false},
{name:'order_id', index:'order_id', width:80, align:'right'},
{name:'status', index:'status', width:50, align:'right'} 
],
pager: '#pager1',
rowNum:10,
rowList:[10,20,30],
sortname: 'cf_id',
sortorder: 'desc',
viewrecords: true,
caption: 'ICT Job Requests',
height: 600,
editurl: "insert_ictjobrequest.html"
});
jQuery("#list1").jqGrid('navGrid','#pager1',{edit:true,add:true,del:true,view:true});

});

</script>