jqueryとajaxを使用してデータベースのデータからHTMLでテーブルを作成する方法

Question

データベースの情報を使用してテーブルを表示しようとしています。私は私のconsole.logで表示されているすべてのデータを見ることができますが、私はどのようにテーブルにそれを配置するか分からない。

ここは私の更新版です。少なくとも1人のオペレータが表示されていますが、1人のオペレータのみが表示されています。すべての演算子を表示するにはどうすればいいですか？ここで

function displayDataTable(index){ 

allocationDataAjax = $.ajax({ 
    type: "POST", 
    url: "./qry/getAllocationData.php", 
    async: true, 
    data: {ModelId: control.settings.modelId}, 
    success: function(result){ 
     allocationData = JSON.parse(result); 

     for (i=0;i<allocationData.length;i++){ 
      //console.log(allocationData["SystemName"][i], allocationData["Operator"][i]); 
      var operator = allocationData["SystemName"][i]; 
      console.log(operator); 
     } 

     $("#dataTableDiv").html(allocationData); 
     $("#pageOverlay").empty(); 
      html = "<div id='dataTableDiv'><h4>Data Table</h4><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>header 1</th><th>header 2</th><th>header 3</th><th>header 4</th><th>header 5</th><th>header 6</th></thead></tr><tbody><tr><td>" + operator + "</td></tr></tbody></table><input type='button' value='Close' onclick='closeOverlay()'>&nbsp;&nbsp;<input type='button' id='exportDataTable' value='Export Table'></div>"; 
     $("#pageOverlay").html(html); 
     } 
    }); 

Answer 1

は誰が$（ "＃dataTableDiv"）を試してみてください、将来的にこの問題に

function displayDataTable(index){ 

    allocationDataAjax = $.ajax({ 
     type: "POST", 
     url: "./qry/getAllocationData.php", 
     async: true, 
     data: {ModelId: control.settings.modelId}, 
     success: function(result){ 
     allocationData = JSON.parse(result); 

     $("#pageOverlay").empty(); 

     html = "<div id='dataTableDiv'><h4>Data Table</h4><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>System Name</th><th>Gatherer</th><th>Operator</th><th>County</th><th>Sample Date</th><th>Daily Avg</th></thead></tr><tbody>"; 

     for (i=0;i<allocationData.length;i++){ 
      //console.log(allocationData); 
      //console.log(allocationData["SystemName"][i], allocationData["Operator"][i]); 

      html += "<tr><td>" + allocationData['SystemName'][i] + "</td><td>" + allocationData['Gatherer'][i] + "</td><td>" + allocationData['Operator'][i] + "</td><td>" + allocationData['County'][i] + "</td><td>" + allocationData['SampleDate'][i] + "</td><td>" + allocationData['DailyAvg'][i] + "</td></tr>"; 

     } 

     html += "</tbody></table><input type='button' value='Close' onclick='closeOverlay()'>&nbsp;&nbsp;<input type='button' id='exportDataTable' value='Export Table'></div>"; 

     $("#pageOverlay").html(html); 
}