jqGrid returns blank cells

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});
});