如何將預取數據附加到數據表的tbody中

Question

我有一些通過ajax調用預取數據的數組。我想將這些數據數組附加到數據表中。碼如下： -

$("#mnGrTblBdy").empty(); 
    for(var i= 0; i<maingraphdata['datesrange'].length; i++) 
     { 
      $("#mnGrTblBdy").append('<tr data-child-value="hidden 1">'); 
      $("#mnGrTblBdy").append("<td class='details-control'></td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['datesrange'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['testorders'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['cmpltdords'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['rptsdlvrd'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['tstsstrtd'][i]+ "</td>"); 
      $("#mnGrTblBdy").append("<td >" +maingraphdata['tstscmpltd'][i]+ "</td>"); 

      $("#mnGrTblBdy").append("</tr>"); 

     } //end for loop 

    // Add event listener for opening and closing details 
    $('#example').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = table.row(tr); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
     } else { 
      // Open this row 
      row.child(format(tr.data('child-value'))).show(); 
      tr.addClass('shown'); 
     } 
    }); 

    var table = $('#example').DataTable({}); 

但是所附行被示出爲簡單的表，而不是通過以下錯誤

Cannot read property 'length' of undefined 

一個數據表，並且還它雖然數據是可見的，但不是在一個數據表而是在一個簡單的html表格中。

Answer 1

我不認爲你可以使用jquery來追加tr元素，如漢堡麪包。您可以使用字符串連字符來構建漢堡風格或以分層方式追加。

使用concat（你必須與語法混亂，使maingraphdata是一個變量，而不是一個字符串，不好意思）：

var row = `<tr data-child-value="hidden 1">'); 
<td class='details-control'></td> 
<td >" +maingraphdata['datesrange'][i]+ "</td> 
<td >" +maingraphdata['testorders'][i]+ "</td> 
<td >" +maingraphdata['cmpltdords'][i]+ "</td> 
<td >" +maingraphdata['rptsdlvrd'][i]+ "</td> 
<td >" +maingraphdata['tstsstrtd'][i]+ "</td> 
<td >" +maingraphdata['tstscmpltd'][i]+ "</td> 
</tr>` 

$("#mnGrTblBdy").append(row); 

或者

追加正確

var $tr = $('<tr data-child-value="hidden 1"></tr>') 
$tr.append("<td class='details-control'></td>"); 
$tr.append("<td >" +maingraphdata['datesrange'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['testorders'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['cmpltdords'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['rptsdlvrd'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['tstsstrtd'][i]+ "</td>"); 
$tr.append("<td >" +maingraphdata['tstscmpltd'][i]+ "</td>"); 

$("#mnGrTblBdy").append($tr);