jqGrid returns blank cells - json

Question

Can't seem to get the following jqGrid code to work http://cablegate.politicswiki.ie/stackoverflow.html
<script type="text/javascript">
$(document).ready(function(){
jQuery("#list2").jqGrid({
url:'http://tables.googlelabs.com/api/query?sql=SELECT * FROM 333136 LIMIT 10&jsonCallback=?',
datatype: "json",
colModel:[
{name:'ident',index:'ident',label:'ident', width:55},
{name:'date',index:'date',label:'date', width:90},
{name:'sourceId',index:'sourceId',label:'sourceId', width:100},
{name:'source',index:'source',label:'source', width:80},
{name:'tags',index:'tags',label:'tags', width:200}
],
jsonReader: {
repeatitems: false,
root: function (obj) {
var rows = new Array();
for(var i = 0; i < obj.table.rows.length;i++)
{
var row = new Object();
row.id = obj.table.rows[i][0];
row.cell = obj.table.rows[i];
rows[i] = row;
}
return rows;
},
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.table.rows.length; }
},
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
});
</script>
Have tried a number of things to get it to work. Nothing seems to do it.

Answer 1

I find the question very interesting. So I modified a little your code and it work now. You can see the results live here.
The corresponding JavaScript code is following
jQuery(document).ready(function() {
jQuery("#list2").jqGrid({
url: 'http://tables.googlelabs.com/api/query?sql=' +
encodeURI('SELECT * FROM 333136 LIMIT 10') + '&jsonCallback=?',
postData: "", // don't send any typical jqGrid parameters
datatype: "json", // or "jsonp"
colModel:[
{name:'ident',index:'ident',key:true,width:60,sorttype:'int'},
{name:'date',index:'date', width:130},
{name:'sourceId',index:'sourceId',width:80,sorttype:'int'},
{name:'source',index:'source',width:150},
{name:'tags',label:'tags',width:350}
],
jsonReader: {
cell: "", // the same as cell: function (obj) { return obj; }
root: "table.rows",
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.table.rows.length; }
},
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
sortorder: "desc",
viewrecords: true,
loadonce: true,
height: "100%",
caption: "How to query Google Fusion Tables"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
});