PreetchedデータをDataTableの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ハンバーガースタイルを構築するか、階層的な方法で追加します。

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);