Untitled

<html>
<head>
<title>jQGrid example</title>
<!-- Load CSS--><br />
<link rel="stylesheet" href="http://localhost/jqgrid/jqgrid/themes/ui.jqgrid.css" type="text/css" media="all" />
<!-- For this theme, download your own from link above, and place it at css folder -->
<link rel="stylesheet" href="http://localhost/jqgrid/jqgrid/themes/redmond/jquery-ui-1.8.1.custom.css" type="text/css" media="all" />
<!-- Load Javascript -->
<script src="http://localhost/jqgrid/jqgrid/js/jquery.js" type="text/javascript"></script>
<script src="http://localhost/jqgrid/jqgrid/js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://localhost/jqgrid/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://localhost/jqgrid/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
</head>
<body>
<table id="datagrid"></table>
<div id="navGrid"></div>
<p><script language="javascript">
jQuery("#datagrid").jqGrid({
        url:'http://localhost/jqgrid/book.php',
    datatype: "json",
    colNames:['No','Title', 'Author', 'Publisher','Year_published'],
    colModel:[
                {name:'no',index:'no', width:55,editable:false,editoptions:{readonly:true,size:10}},
                {name:'title',index:'title', width:80,editable:true,editoptions:{size:10}},
                {name:'author',index:'author', width:90,editable:true,editoptions:{size:25}},
                {name:'publisher',index:'publisher', width:60, align:"right",editable:true,editoptions:{size:10}},
                {name:'year_published',index:'year_published', width:60, align:"right",editable:true,editoptions:{size:10}}
        ],
        rowNum:10,
        rowList:[10,15,20,25,30,35,40],
        pager: '#navGrid',
        sortname: 'no',
        sortorder: "asc",
        height: 210,
        viewrecords: true,
        caption:"Example"
});
jQuery("#datagrid").jqGrid('navGrid','#navGrid',{edit:true,add:true,del:true});
</script>
</body>
</html>