working jqGrid Example

by aalmaas

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>
<div id="foo">A top div</div>
<table id="grid"></table>

CSS

.ui-jqgrid-bdiv {
    
    max-height:300px;
}

.ui-jqgrid{
    position:absolute;
    bottom:10px;
}

#foo{
    height:500px;
    width:500px;
    clear:both;
}

JavaScript

$("#grid").jqGrid({
    datatype: "local",
    //height: "auto",
    height:100,
    width:800,
    hiddengrid:true,
    colNames: ['','1992','1997','2002','2007',
                                '2012','2017','2022','2027','2032','2037'],
    colModel: [{name:'Name',index:'Name', align: 'left'},{name:'Col0',index:'Col0'},{name:'Col1',index:'Col1'},{name:'Col2',index:'Col2'},{name:'Col3',index:'Col3'},{name:'Col4',index:'Col4'},{name:'Col5',index:'Col5'},{name:'Col6',index:'Col6'},{name:'Col7',index:'Col7'},{name:'Col8',index:'Col8'},{name:'Col9',index:'Col9'}],
    caption: "Stack Overflow Example",
    data:[{ Name: 'County1', Col0: '11 273', Col1: '11 431', 
                                 Col2: '12 515', Col3: '13 414', Col4: '15 143',
                                 Col5: '16  852', Col6: '18 362', Col7: '19 698', 
                                 Col8: '20 821', Col9: '21 734' },
                               { Name: 'County2', Col0: '22 530', Col1: '24 457', 
                                 Col2: '25 763', Col3: '27 247', Col4: '28 970', 
                                 Col5: '31 135', Col6: '32 977', Col7: '34 649', 
                                 Col8: '36 020', Col9: '37 158' },
                               { Name: 'County3', Col0: '11 909', Col1: '12 734', 
                                 Col2: '14 037', Col3: '14 873', Col4: '17 284', 
                                 Col5: '20 083', Col6: '22 877', Col7: '25 603', 
                                 Col8: '28 064', Col9: '30 210' },
                               { Name: 'County4', Col0: '10 465', Col1: '12 165', 
                                 Col2: '12 962', Col3: '13 890', Col4: '15 154', 
                                 Col5: '16 293', Col6: '17 284', Col7: '18 174', 
                                 Col8: '18 897', Col9: '19 446' },
                               { Name: 'County5', Col0: '13 300', Col1: '14 350', 
                                 Col2: '15 777', Col3: '16 791', Col4:...