working jqGrid Example

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>


<table id="rowed3"></table>
<div id="prowed3"></div>

CSS

html {
    font: 12px Tahoma;
}
h1 {
    font-size: 1.5em
}
ul {
    width:300px
}
li {
    float: left;
}
li.ui-widget-content {
    margin-right: 4px;
}
.ui-icon-white {
    background-image: url("//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/le-frog/images/ui-icons_ffffff_256x240.png");
    height: 16px;
    padding: 0 !important;
    width: 16px;
    float: left;
    background-position: -80px -128px;
}
table.before {
    border: 1px solid #000;
}
table.before td, table.before th {
    border: 1px solid #aaa;
    padding: 2px 10px
}
#grid .blue-tag, .before .blue-tag {
    background: #0A92FF;
    color: #FFFFFF;
}

JavaScript

$(function () {
    'use strict';
    jQuery("#43rowed3").jqGrid({
   	url:'http://trirand.com/blog/jqgrid/server.php?q=2',
	datatype: "json",
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90, editable:true},
   		{name:'name',index:'name', width:100,editable:true},
   		{name:'amount',index:'amount', width:80, align:"right",editable:true},
   		{name:'tax',index:'tax', width:80, align:"right",editable:true},		
   		{name:'total',index:'total', width:80,align:"right",editable:true},		
   		{name:'note',index:'note', width:150, sortable:false,editable:true}		
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#p43rowed3',
   	sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
	editurl: "server.php",
	caption: "Using navigator"
});
jQuery("#43rowed3").jqGrid('navGrid',"#p43rowed3",{edit:false,add:false,del:false});
jQuery("#43rowed3").jqGrid('inlineNav',"#p43rowed3");
});