Формат aadata подключаемого модуля jquery datatable, не отображающий таблицу

0

Iam новичок в jquery. Iam работает с jQuery datatable plugin. Я попытался отобразить массив aadata с datatable, но iam не получал 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}]';
Теги:
jquery-plugins
jquery-datatables

2 ответа

0

Ниже приведен код, в котором я работал. Я опубликовал только сценарий. Таблица была построена с помощью 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
                            });
                        });
                    }
                }

            });

        });
Поделиться
0

(Обновлено)

Во-первых, ваш JSON недействителен. Вам не хватает кавычек "" вокруг пары строк (те, где значение "null").

Затем в aoColumns вы должны обратиться к имени объекта /JSON для каждого столбца, используя mDataProp. Вы определяете названия столбцов. dataTables не может знать, где каждая часть JSON должна быть сопоставлена с этим столбцом.

Кроме того, вы можете вставить последний столбец "share" более "элегантный", используя $.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 а dataTable показывает содержимое на

var dataTable = $('#example').dataTable( {
  aaData: data,
  aoColumns: [
    { "mDataProp": "deviceInfo" },
    { "mDataProp": "lastModified"},
    { "mDataProp": "etag"},
    { "mDataProp": "key"},
    { "mDataProp": "size"},
    { "mDataProp": "share"}  
  ]
});
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню