jqGrid retourne cellules vides

Question

peut sembler ne pas obtenir le code jqGrid suivantes pour 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> 

ont essayé un certain nombre de choses à faire fonctionner. Rien ne semble le faire.

Answer 1

Je trouve la question très intéressante. J'ai donc modifié un peu votre code et ça marche maintenant. Vous pouvez voir les résultats en direct here.

Le code JavaScript correspondant suit

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