Bind jqGrid to JSON Object

How do I bind a simple JSON Object to a jqGrid?

Here's what I have:

    var tableSrc = { "page":"1", "total":1, "records":"3", "rows": [
        { "title": "Title1", "subtitle": "subTitle", "authors": ["a1", "a2", "a3"] },
        { "title": "Title2", "subtitle": "subtitle", "authors": ["X", "Y"] },
        { "title": "Title3", "subtitle": "subTitle", "authors": ["1", "2", "3", "4"]}]
    };

    $(".jqGridTarget").jqGrid({
        datastr: tableSrc,
        datatype: "jsonstring",
        colNames: ['title', 'subtitle'],
        colModel: [
            { name: 'title', index: 'title', width: 55 },
            { name: 'subtitle', index: 'subtitle', width: 90}]
    });

And then:

<table class="jqGridTarget">
</table>

This yields the error:

Uncaught Syntax error, unrecognized expression: # inside of jQuery 1.6.2

I've also tried using json instead of jsonstring with data replacing datastr. That eliminates the error, but the grid is stil开发者_C百科l empty. In both cases undefined appears, or flashes in the grid body.

EDIT

I've also tried datatype: "local" with tableSrc as data. No error or undefined, but still no data in grid.

END EDIT

Also, here are the script/css files I have referenced:

<script type='text/javascript' src='jquery.min.js'></script>
<script type='text/javascript' src='jquery.tmpl.js'></script>
<script type='text/javascript' src='jquery.jqGrid.min.js'></script>
<script type='text/javascript' src='knockout-1.2.1.js'></script>
<link rel="Stylesheet" type="text/css" href="ui.jqgrid.css" />

Three changes are required to make your code working (see here the fixed demo):

1. add parameter jsonReader: { repeatitems: false }`
2. add and id to the <table> element
3. include i18n/grid.locale-en.js before jquery.jqGrid.min.js

Additionally I would recommend you to use always gridview: true and in the most cases define height as height: 'auto'.

I think you are looking for datatype: 'local' and data: tableSrc.

datatype: Defines what type of information to expect to represent data in the grid. Valid options are xml - we expect xml data; xmlstring - we expect xml data as string; json - we expect JSON data; jsonstring - we expect JSON data as string; local - we expect data defined at client side (array data); javascript - we expect javascript as data; function - custom defined function for retrieving data.

data: A array that store the local data passed to the grid. You can directly point to this variable in case you want to load a array data. It can replace addRowData method which is slow on relative big data

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options