working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<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>
  <table id="list"><tr><td/></tr></table>
    <div id="pager"></div>

CSS

<style type="text/css">
        .myAltRowClass { background-color: #DCFFFF; background-image: none; }
		
		span.cellWithoutBackground
        {
            display:block;
            background-image:none;
                    }
					.ui-jqgrid tr.ui-row-ltr td.noHorizLines {background-color:#C5BE97;}
					th.ui-th-column div{
        white-space:normal !important;
        height:auto !important;
        padding:2px;
		
    
}
    </style>

JavaScript

$(document).ready(function () {
            'use strict';
            var mydata = [
                    {id:"1", invdate:"2007-10-01",name:"test",  note:"note",  amount:"200.00",tax:"10.00",closed:true, ship_via:"TN"},
                    {id:"2", invdate:"2007-10-02",name:"test", note:"note2", amount:"20.00",tax:"",closed:false,ship_via:"FE"},
                    {id:"3", invdate:"2007-09-01",name:"test3", note:"note3", amount:"40.00",tax:"10.00",closed:false,ship_via:"FE"},
                    {id:"4", invdate:"2007-10-04",name:"test4", note:"note4", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN"},
                    {id:"5", invdate:"2007-10-31",name:"test5", note:"note5", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE"},
                    {id:"6", invdate:"2007-09-06",name:"test6", note:"note6", amount:"400.00",tax:"30.00",closed:false,ship_via:"FE"},
                    {id:"7", invdate:"2007-10-04",name:"test7", note:"note7", amount:"200.00",tax:"10.00",closed:true ,ship_via:"TN"},
                    {id:"8", invdate:"2007-10-03",name:"test8", note:"note8", amount:"300.00",tax:"20.00",closed:false,ship_via:"FE"},
                    {id:"9", invdate:"2007-09-01",name:"test9", note:"note9", amount:"400.00",tax:"30.00",closed:false,ship_via:"TN"},
                    {id:"10",invdate:"2007-09-08",name:"test10",note:"note10",amount:"500.00",tax:"30.00",closed:true ,ship_via:"TN"},
                    {id:"11",invdate:"2007-09-08",name:"test11",note:"note11",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE"},
                    {id:"12",invdate:"2007-09-10",name:"test12",note:"note12",amount:"500.00",tax:"30.00",closed:false,ship_via:"FE"}
                ],
                grid = $("#list");

            grid.jqGrid({
                datatype:'local',
                data: mydata,
                colNames:['Inv No','Date','Client','Amount','Tax','Total','Closed','Shipped via','Notes'],
                colModel:[
                   ...