如何使用jquery和ajax从数据库中的数据创建HTML表

时间:2016-11-16 21:03:37

标签: jquery html mysql ajax

我正在尝试使用数据库中的信息显示表格。我可以看到我的console.log显示的所有数据,但我不知道如何将其放入表中。

这是我的更新版本。它现在显示至少一个运算符,但只显示一个运算符,而不是所有运算符。我怎样才能让它显示所有操作员?

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

1 个答案:

答案 0 :(得分:0)

以下是我的答案,以防其他人在将来遇到此问题

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