jQuery的數據表不工作dynamicaly生成HTML表

Question

我想上應用的jQuery dattable動態生成的html table.But它不是working.I現在做這樣的..

function buildHtmlTable() { 
    var columns = addAllColumnHeaders(myList); 
    ////alert("Inserted rows");tp 
    for (var i = 0 ; i < myList.length ; i++) { 
    var row$ = $('<tr/>'); 
    for (var colIndex = 0 ; colIndex < columns.length ; colIndex++) { 
     var cellValue = myList[i][columns[colIndex]]; 
     if (cellValue == null) { cellValue = ""; } 
     if (colIndex==3) 
     { 
     cellValue = myList[i][columns[2]]+","+myList[i][columns[3]]; 
     row$.append($('<td class="cell3" width="100"/>').html(cellValue)); 
     var quantity=myList[i][columns[1]]; 
     addMarkeronload(myList[i][columns[2]],myList[i][columns[3]],quantity); 
     } 
     else if(colIndex!=2) 
     row$.append($('<td width="100"/>').html(cellValue)); 
    } 

    $("#example").append(row$); 
    } 
    // $('#example1').paginate({itemsPerPage: 5}); 
    ////alert("Inserted rows"); 
    $('.cell3').each(function(index, element){ 
    var tn = $(element).text(); 
    $(element).html('<a onclick=LocateMarker('+tn+',this) href=javascript:void(0);>Locate</a>'); 
    }); 
} 
     var myList=[{"time" : "abc", "qty" : 150, "price" : 8.504768900000000000, "tot" :76.931176100000010000,"id":12}, 
      {"time" : "abc", "qty" : 150, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 450, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 250, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 350, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":62}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":42}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":72}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":71}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":10}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":72}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":10}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":71}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":11}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":41}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":11}, 
      {"time" : "abc", "qty" : 50, "price" : 8.5, "tot" : 76.9,"id":12}, 
      ]; 


    function addAllColumnHeaders(myList) 
    { 
     var columnSet = []; 
     var headerTr$ = $('<tr/>'); 

     for (var i = 0 ; i < myList.length ; i++) { 
     var rowHash = myList[i]; 
     for (var key in rowHash) { 
      if ($.inArray(key, columnSet) == -1){ 
      ////alert(key); 
      columnSet.push(key); 
      if(key!="price") 
      headerTr$.append($('<th/>').html(key)); 
      } 
     } 
     } 
     $("#example").append(headerTr$); 

     return columnSet; 
    } 

在文件準備好我我調用這些函數

  $(document).ready(function() { 
       buildHtmlTable(); 
       var dtOptions = { 
       "bPaginate": false, 
       "bLengthChange": false, 
       "bFilter": false, 
       "bInfo": false, 
       bJQueryUI: true    
      } 

      var dt = $("#example").dataTable(dtOptions); 
      }); 

HTML佔位符是這樣

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
     <tbody></tbody></table> 

HTML選項卡樂正在顯示。但數據表的效果是摩來臨..我必須解決？

Answer 1

這似乎是因爲你的頭部定義。您缺少thead。

$('<thead />').appendTo($("#example")).append(headerTr$) 

也在myList陣列（陣列中的最後一個對象後）的端部有一個,這不是有效的語法。

演示：Fiddle。

對於數據表插件，標題行應與在元素