jquery datatable插件的元數據格式不顯示錶

Question

IAM新手jquery。 Iam使用jQuery數據表插件。我試圖顯示帶有datatable的aadata數組，但是iam沒有顯示數據表，只能看到空白頁。

任何人都可以幫助我，我哪裏出錯了嗎？

下面是我使用的代碼。

 $(document).ready(function() { 

     var Listobj = new Array(); 

     var downloadClick = "<center><img src='Image/Download.png' style='cursor:pointer' onclick=callDownload('','','','') /></center>" 

     var callPlayVedio = "<center><img src='Image/Play.png' style='cursor:pointer' onclick=callPlayVedio('','','','') /></center>" 

     $.getJSON("sources/jsondata.json", function (data) { 
      var dataobj = $.parseJSON(JSON.stringify(data)); 
      $.each(dataobj, function (key, val) { 

       if (key == "contents") { 
        for (var i = 0, l = val.length; i < l; i++) { 
         var obj = val[i]; 
         var auctualSize = ((obj.size)/1024).toFixed(2) + " kb"; 
         Listobj[i] = new Array(obj.key, obj.lastModified, auctualSize, downloadClick, callPlayVedio, "<center><img src='Image/share.png' style='cursor:pointer;width:16px;height:16px;'/></center>"); 

        } 
       } 

      }); 
      TableDisplay(Listobj); 

     }); 
    }); 

</script> 

<script type="text/javascript" charset="utf-8"> 
    function TableDisplay(Tablevalues) { 

     alert("sec"+Tablevalues); 
     $('#table_test').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>'); 

     $('#example').dataTable({ 
      "aaData": Tablevalues, 
      "aoColumns": [ 
           { "sTitle": "Files" }, 
           { "sTitle": "Date and Time" }, 
           { "sTitle": "size"}, 
           { "sTitle": "Download"}, 
           { "sTitle": "Play"}, 
           {"sTitle": "share"}] 
     }); 
    }; 
</script> 

和我的JSON值都是

var myjson='[{"isTruncated": "false","nextMarker": "null","marker": "null","prefix": "Mymedia/mysys/","contents": [{"deviceInfo": "null","lastModified": "Thu Dec 26 16:36:42 IST 2013","etag": "d41d8cd98f00b204e9800998ecf8427e","key":"Mymedia/mysys/audio_$folder$","size": "0"},{"deviceInfo": null,"lastModified": "Thu Dec 26 16:36:11 IST 2013","etag": "d41d8cd98f00b204e9800998ecf8427e","key": "Mymedia/mysys/doc_$folder$","size": "0"},{ "deviceInfo": null,"lastModified": "Thu Dec 26 16:36:20 IST 2013", "etag": "d41d8cd98f00b204e9800998ecf8427e","key": "Mymedia/mysys/imge_$folder$","size": "0"},{"deviceInfo": null,"lastModified": "Thu Dec 26 16:36:56 IST 2013","etag": "d41d8cd98f00b204e9800998ecf8427e","key":"Mymedia/mysys/others_$folder$","size": "0"},{"deviceInfo": null,"lastModified": "Thu Dec 26 16:36:32 IST 2013","etag": "d41d8cd98f00b204e9800998ecf8427e","key": "Mymedia/mysys/video_$folder$","size": "0"}],"name": "name", "statusCode": "200","statusMessage": "Success","error": null}]'; 

Answer 1

（更新）

首先，你JSON是無效的。圍繞幾個字符串（值爲「null」的字符串）缺少引號""。

接下來，在aoColumns中，您必須使用mDataProp參考每列的數據實體/ JSON名稱。您只是定義了列標題。 dataTables無法知道JSON的每個部分應該映射到哪個列。

另外，還可以通過使用$.map插入的最後一列「共享」更「優雅」：

var data = $.map(json[0].contents, function(e, i) { 
    e.share = "<center><img src='Image/share.png' style='cursor:pointer;width:16px;height:16px;'/></center>"; 
    return e; 
}); 

...或者以其他方式操縱JSON在循環。您不必手動循環，比較鍵等。只需參閱json[0].contents並使用$.map即可。

看到這個工作小提琴（更新） - >http://jsfiddle.net/SuBdy/。該JSON校正，更容易解析與運用$.map和數據表顯示了

var dataTable = $('#example').dataTable({ 
    aaData: data, 
    aoColumns: [ 
    { "mDataProp": "deviceInfo" }, 
    { "mDataProp": "lastModified"}, 
    { "mDataProp": "etag"}, 
    { "mDataProp": "key"}, 
    { "mDataProp": "size"}, 
    { "mDataProp": "share"} 
    ] 
}); 

Answer 2

以下內容的代碼，我得到了工作。我只發佈了腳本。該表已用html構建。

$(document).ready(function() { 

    var downloadClick = "<center><img src='Image/Download.png' style='cursor:pointer' onclick=callDownload('','','','') /></center>" 
    var callPlayVedio = "<center><img src='Image/Play.png' style='cursor:pointer' onclick=callPlayVedio('','','','') /></center>" 

     $.getJSON("sources/jsondata.json", function (data) { 
      var dataobj = $.parseJSON(JSON.stringify(data)); 
       $.each(dataobj, function (key, val) { 
       var Listobj = new Array(); 
       if (key == "contents") { 
        for (var i = 0, l = val.length; i < l; i++) { 
         var obj = val[i]; 
         var auctualSize = ((obj.size)/1024).toFixed(2) + " kb"; 
         Listobj[i] = new Array(obj.key, obj.lastModified, auctualSize, downloadClick, callPlayVedio, "<center><img src='Image/share.png' style='cursor:pointer;width:16px;height:16px;'/></center>"); 


         $(document).ready(function() { 
          //alert("datable running"); 
          alert(Listobj); 
          var oTable = $('#example').dataTable({ 
           "bDestroy": true, 
           "aaData": Listobj, 
           "bLengthChange": false 
          }); 
         }); 
        } 
       } 

      }); 

     });