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.

did you find any solutions? I'm experiencing the same thing... — Benny, Dec 01 '10 at 07:53

Oleg · Answer 1 · 2010-12-01T18:03:08.957

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

edited Dec 01 '10 at 18:03

answered Dec 01 '10 at 17:12

Oleg

220,925
34
403
798

@VishnudevK: You are welcome! You can take look in [another answer](http://stackoverflow.com/a/9588051/315935) where will be used `datatype: 'jsonp'` and `postData` instead of encoding unneeded information in the URL directly. – Oleg Mar 14 '13 at 15:03
but in the same example when I use my own json string in "json.html" file its showing blank table – Vishnudev K Mar 14 '13 at 15:10
@VishnudevK: I don't undersand what you mean ("json string" and some "json.html" ). JSONP should be implemented *on the server side*. `tables.googlelabs.com` do this. The returned data in case of usage JSONP is JavaScript code instead of JSON string. It's just call of function from `jsonCallback` with JSON data as parameters. – Oleg Mar 14 '13 at 15:21
check these two links http://www.ok-soft-gmbh.com/jqGrid/John.txt , http://www.ok-soft-gmbh.com/jqGrid/John.htm I tried creating this example in local.. its giving blank table – Vishnudev K Mar 14 '13 at 15:32
@VishnudevK: You wrote comment to my answer about JSONP. It's the way to get JSON data which provides *another web site*. The demo which you referenced (http://www.ok-soft-gmbh.com/jqGrid/John.htm) use just standard JSON from *the same web site* (`http://www.ok-soft-gmbh.com`). Probably you have some other problem. You should better to open new question where you describe the problem. – Oleg Mar 14 '13 at 15:43
please find the question http://stackoverflow.com/questions/15414121/how-to-populate-jqgrid-table-using-json – Vishnudev K Mar 14 '13 at 15:58

jqGrid returns blank cells

1 Answers1

Linked