jquery running, jqgrid won't render

I have been successful building standalone HTML pages of jquery and jqgrid examples that work. I was also successful in converting my jquery (drop n drag) example to work from within a page post. I followed the same logic with the jqgrid example but it will not display. The code seems to be there upon a view source. I tried the $ wrapper suggestion but still does not render.

Any other suggestions?

Here is the code I have within the page post

<script src="/gridJS/jquery-1.9.0.min.js"></script>
<script src="/gridJS/grid.locale-en.js"></script>
<script src="/gridJS/jquery.jqGrid.min.js"></script>

<link href="/gridJS/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<link href="/gridJS/ui.jqgrid.css" rel="stylesheet" />
<link href="/gridJS/ui.multiselect.css" rel="stylesheet" />

<script>

var rows =

    [
 {id:"1", SYMBOL:"A", LAST:"100.9", CHANGE:"22.3", PERCCHANGE:"56.88", HIGHLOW:"10000"},
 {id:"2", SYMBOL:"AA", LAST:"54.15", CHANGE:"44.95", PERCCHANGE:"44.5", HIGHLOW:"2373700"},
 {id:"3", SYMBOL:"AAA", LAST:"28.82", CHANGE:"9.04", PERCCHANGE:"8.85", HIGHLOW:"16262600"},
 {id:"4", SYMBOL:"AAN", LAST:"34.82", CHANGE:"30.45", PERCCHANGE:"29.86", HIGHLOW:"325400"},
    ];

var data = {
    rows : rows,
    total: "1",
    page: "1",
    records: "2"
};

(function($) {

    // $() will work as an alias for jQuery() inside of this function

    $(document).ready(function () {

            jQuery("#jqTable").jqGrid({
                                        data: rows,
                                    datatype: "local",
                                      height: 250,
                                    colNames: ["SYMBOL", "LAST", "CHANGE", "PERCCHANGE", "HIGHLOW"],
                                    colModel: [
                                              { name: "SYMBOL",      index: "SYMBOL",     width: 200, align: "left" },
                                              { name: "LAST",        index: "LAST",       width: 200, align: "left" },
                                              { name: "CHANGE",      index: "CHANGE",     width: 200, align: "left" },
                                              { name: "PERCCHANGE",  index: "PHANGE",     width: 200, align: "left"},
                                              { name: "HIGHLOW",     index: "HL",         width: 200, align: "left"}
                                              ],
                                  jsonReader: {
                                                  root: "rows",
                                                  page: "page",
                                                 total: "total",
                                               records: "records",
                                                  cell: "cell",
                                                    id: "id"
                                              },

                                 localReader: {
                                                  root: "rows",
                                                  page: "page",
                                                 total: "total",
                                               records: "records",
                                                  cell: "cell",
                                                    id: "id"
                                              },

                                 multiselect: false,
                                    //paging: true,
                                    //rowNum:10,
                                   //rowList:[10,20,30],
                                       pager: $("#jqTablePager"),
                                    loadonce:true,
                                 viewrecords: true,
                                     caption: "Table Name"

            });//.navGrid('#jqTablePager',{edit:false,add:false,del:true});

        });

})(jQuery);

</script>

<table id="jqTable"></table >
<div id="jqTablePager"></div>