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

      }); 

     });