Question

Iam newbie to jquery。我使用jquery datatable插件。我试图用数据表显示数据库数组，但是我没有显示数据表，只能看到空页。

任何人都可以在我出错的地方帮助我吗？

以下是我使用的代码。

     $(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

以下是我工作的代码。我只发布了脚本。该表已使用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
                            });
                        });
                    }
                }

            });

        });

jquery datatable插件不显示表格的数据格式

1 个答案: