I'm trying to load a jqGrid from json data made via a REST call. But my grid is just a blank rectangle on the page. Here is my code:
<body>
<div id="tabs">
<ul>
<li><a href="#panel-users">Users</a></li>
<li><a href="#panel-clients">Clients</a></li>
</ul>
<div id="panel-users">
<table id="list"></table>
<div id="pager"></div>
</div>
<div id="panel-clients">
</div>
</div>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'http://192.168.20.155:3000/admin/rest/users',
dataType: 'json',
mtype: 'GET',
colNames:['Id','Username', 'Minutes','Status','Message','Notes','Troublemaker'],
colModel :[
{name:'id', index:'id', width:11},
{name:'username', index:'username', width:90},
{name:'minutes', index:'minutes', width:3, align:'right'},
{name:'status', index:'status', width:80, align:'right'},
{name:'message', index:'message', width:80, align:'right', sortable:false},
{name:'note', index:'note', width:150, sortable:false},
{name:"troublemaker", index:'troublemaker', width:1}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'username',
sortorder: 'desc',
viewrecords: true,
caption: 'My test grid',
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata"
}
});
});
</script>
And here is the JSON data that the url returns:
{"page":0,"records":"3","total":1,"rows":[{"cell":["1","admin","30","enabled",null,null,"0"]},{"cell":["2","test1","30","enabled",null,null,"0"]},{"cell":["3","test2","30","enabled",null,null,"0"]}]}
Any help would be greatly appreciated.