jQuery Grid Plugin - jqGrid

How this jqGrid is actually performing search, add, edit, delete to DB? I can't get it working, I can only select.

If I add, edit, or delete, it just update the UI / gridview.

Here is my table:

CREATE TABLE `vip_queue` (                                
             `id` INT(11) NOT NULL AUTO_INCREMENT,                   
             `username` VARCHAR(64) DEFAULT NULL,                    
             `group_id` SMALLINT(3) DEFAULT NULL,                    
             PRIMARY KEY  (`id`),                                    
             UNIQUE KEY `username` (`username`)                      
           ) ENGINE=INNODB AUTO_INCREMENT=65 DEFAULT CHARSET=utf8

Here is my Javascript:

<script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery("#list").jqGrid({
                    url:'admin.vip.queue.process.php',
                    datatype: "json",
                    mtype: "POST",
                    colNames:['vip_id','username', 'group_id'],
                    colModel:[
                        {name:'vip_id', index:'vip_id', width:100, editable:false, editoptions:{readonly:true}, editrules:{required:false}},
                        {name:'username', index:'username', width:300, editable:true, edittype:'text'},
                        {name:'group_id', index:'group_id', width:200, editable:true, edittype:'text'}
                    ],
                    pager: '#pagernav',
                    rowNum:50,
                    rowList:[10,50,100,200,500,1000],
                    sortname: 'vip_id',
                    sortorder: "asc",
                    viewrecords: true,
                    caption: "Manage VIP Queue",
                    editurl: "admin.vip.queue.process.php",
                    height: 400
                });
                jQuery("#list").jqGrid('navGrid','#pagernav',
                    {}, //options
                    {mtype:"POST",closeAfterEdit:true,reloadAfterSubmit:true}, // edit options
                    {mtype:"POST",closeAfterAdd:true,reloadAfterSubmit:true}, // add options
                    {mtype:"POST",reloadAfterSubmit:true}, // del options
                    {} // search options
                );
            });
        </script>

Here is my php script:

require_once('class/db.php');
$db= new db();
$writeConn = $db->getWriteConnection();
$debug = false;

$page = $_POST['page']; // get the requested page
$limit = $_POST['rows']; // get how many rows we want to have into the grid
$sidx = $_POST['sidx']; // get index row – i.e. user click to sort
$sord = $_POST['sord']; // get the direction
if(!$sidx) $sidx =1;

$sql = "SELECT COUNT(id) as count FROM vip";
$result = $db->query($sql, $debug, $writeConn);
$row = mysql_fetch_array($result);
$count = $row['count'];

if( $count >0 ) {
    $total_pages = ceil($count/$limit);
} else {
    $total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page – $limit; // do not put $limit*($page – 1)
if ($start<0) $start = 0;

$sql = "SELECT id as 'vip_id', username, group_id FROM vip ORDER BY ".$sidx." ". $sord." LIMIT ".$start." , ".$limit;
$result = $db->query($sql, $debug, $writeConn);

$response->page = $page;
$response->total = $total_pages;
$response->records = $count;
$i = 0;
while($row = mysql_fetch_array($result))
{
    $response->rows[$i]['id']=$row['vip_id'];
    $response->rows[$i]['cell']=array($row['vip_id'],$row['username'],$row['group_id']);
    $i++;     
}
echo json_encode($response);
$db->close($writeConn);

Please help. Thx