jquery datatable插件aadata格式不显示表格

Posted 2023-05-09

【中文标题】jquery datatable插件aadata格式不显示表格

【英文标题】：jquery datatable plugin aadata format not displaying the table

【发布时间】：2014-02-12 06:27:46

【问题描述】：

我是 jquery 的新手。我正在使用 jquery 数据表插件。我试图用数据表显示 aadata 数组，但我没有显示数据表，我只能看到空页面。

谁能帮我解决我哪里出错了？

下面是我使用的代码。

     $(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]';

【参考方案1】：

以下是我得到的代码。我只发布了脚本。表格是用 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
                            );
                        );
                    
                

            );

        );