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>
<div id="myDiag" style="display:none">
    <table id="grid"></table>
    <div id="pager"></div>
</div>
<br>
<button id="openMe">Open me</button>

JavaScript

$("#openMe").click(function () {
    $("#myDiag").dialog({
       
        width: 500,
        height: 500
    })
});

var data = [
    [48803, "DSK1", "", "02200220", "OPEN"],
    [48769, "APPR", "", "77733337", "ENTERED"]
];

var grid = $("#grid").jqGrid({
    datatype: "local",
    height: 250,
    pager: '#pager',
    search: true,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int",
        searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}
    }, {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date",
        searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}
    }, {
        name: 'blank',
        index: 'blank',
        width: 30
    }, {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float",
        searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}
    }, {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"
    }],
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

grid.jqGrid('navGrid', '#pager', {
    add: false,
    edit: false,
    del: false,
    search: true,
    refresh: true
}, {}, {}, {}, {
    multipleSearch: true,
    multipleGroup: true,
    showQuery: true
});
grid.jqGrid('filterToolbar',{ searchOperators: true,stringResult: true, searchOnEnter: false, autosearch: true ,enableClear: false, defaultSearch: 'cn', ignoreCase: true});
var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}