时间戳

首页 > 解决方案 > 在数据表中使用 PHP 和 JavaScript 显示 MySQL 表

javascript - 在数据表中使用 PHP 和 JavaScript 显示 MySQL 表

问题描述

目前，我正在开发一个网站以扩展和提高我在 Web 开发方面的知识，我是编程的初学者。

所以我试图显示我accountinfo在 html 数据表中命名的表的数据。我试图仅在 html 数据表中显示它，php并在 html 文件中回显它，它工作得很好。像这样：

<table id="tblList" class="text-center">
    <thead class="bg-light text-capitalize">
        <tr>
            <th hidden>User ID</th>
            <th>Control No.</th>
            <th>Account Name</th>
            <th>Date Inspection</th>
            <th>Date of Report</th>
            <th>Actual Use</th>
            <th>Landmark</th>
            <th>Registered Owner</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <?php
            echo $output;
        ?>
    </tbody>
</table>

此代码没有错误，但我想使用 javascript 在数据表中显示它。

但我不知道如何处理它..

我已经尝试了一点，但我没有得到正确的结果。它不会在 HTML 数据表中显示 Mysql 表的值。

我试过这个：

function loadAccountList() {
    $.ajax({
        type: 'POST',
        url: '../php_functions/tableList.php',
        dataType: 'json',
        data: xdata,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            $('#tbodyemplist').empty();
            var cells = eval("(" + response.d + ")");
            for (var i = 0; i < cells.length; i++) {

                var resDate;
                if (cells[i].res_date == "")
                {
                    resDate = "N/A";
                }
                else
                {
                    resDate = cells[i].res_date;
                }

                $('#tbodyemplist').append('<tr data-empid="' + cells[i].ID + '">'
                + '<td style="font-size:11px; text-align:center;" hidden>' + cells[i].badgenum+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].CN+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' +cells[i].AccName+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].DI+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' +cells[i].contact_no+'</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].DR+</td>'
                + '<td style="font-size:11px; text-align:center;">' +  cells[i].ActUse+ '</td>'                            
                + '<td style="font-size:11px; text-align:center;">' + cells[i].Landmark+ '</td>'
                + '<td style="font-size:11px; text-align:center;">' + cells[i].status+ '</td>'
                                    + '</tr>');
            }
        },
        error: function (error) {
            console.log(error);
        },
        complete: function () {
            $('#tblemplist').dataTable({
                "order": [],
                "columnDefs": [{
                    "targets": 'no-sort',
                    "orderable": false,
                }]
            }).end();
            $('#tblemplist').css('width', '100%');
        }
    });
}

并像这样在html中调用它

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jsFiles/index.js"></script>

还有php文件

<?php 
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "benchmark";

    // Create connection
    $conn = mysqli_connect($servername, $username, $password, $dbname);
    // Check connection
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }

    $acc_id="";
    $acc_name="";
    $date_inspection="";
    $date_report = "";
    $act_useof_prop="";
    $landmark="";
    $reg_owner="";
    $bvcsi_control = "";
    $status = "";
    $lstrow = "";

    $sql = "SELECT account_id, account_name, date_inspection, date_report, act_useof_prop, landmark, reg_owner, bvcsi_control,status from accountinfo ORDER BY account_id ASC";
    $result = mysqli_query($conn,$sql);
    $num = mysqli_num_rows($result);
    $output = '';
    if ($num > 0)
    {
        while ($row = mysqli_fetch_array($result))
        {
            $ID= $row["account_id"];
            $CN= $row["bvcsi_control"];
            $AccName= $row["account_name"];
            $DI= $row["date_inspection"];
            $DR= $row["date_report"];
            $actUse= $row["act_useof_prop"];
            $landmark = $row["landmark"];
            $reg_owner = $row["reg_owner"];
            $status = $row["status"];

        }
    }
?>

这个项目将交给我曾经提供 OJT 的公司。

编辑

请参阅附图：控制台错误：

在此处输入图像描述

编辑：在此处输入图像描述

标签： javascriptphphtml

解决方案

如果您想根据您database使用的 javascript 创建表格，您需要的是：

第一步是，Select数据到您的表并以json格式返回。

例如像这样，说它data.php：

$temparray = array();

$sqlselect = "SELECT * FROM accountinfo ";
$result = $conn->query($sqlselect);
if ($result->num_rows > 0){
    while($row = $result->fetch_assoc()) 
    {
        array_push($temparray, $row); //save your data into array
    }
}
echo json_encode($temparray);

尝试打开data.php它是显示json数据吗？如果是，进入第二步。

第二步是，使用 ajax 调用你的 json 数据。

例如像这样，说它loadTable.js：

$.ajax({
    url: "data.php",
    type: "get", 
    dataType: "JSON",
    data: {}, //this is data you send to your server
    success: function(res)
    {   
        console.log(res); //show all data
        console.log(res.length); //check data length

        //doing looping for create tbody.

    }
})

如果 console.log 显示数据，您可以使用循环执行下一步。

我尝试创建简单的工作示例来帮助您，希望对您有所帮助：

$.ajax({
  url: "https://api.myjson.com/bins/dgd5u", //change to your php file (in my example data.php)
  type: "get",
  dataType: "JSON",
  data: {}, //this is data you send to your server
  success: function(res) {
    console.log(res);
    console.log(res.length);

    for (let i = 0; i < res.length; i++) {
      $('#testing').append('<tr><td>' + res[i]['name'] + '</td><td>' + res[i]['phone'] + '</td><td>' + res[i]['email'] + '</td></tr>')
    }

  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-md-6">
  <table class="table table-bordered" style="text-align:center">
    <thead>
      <td>Name</td>
      <td>Phone</td>
      <td>Email</td>
    </thead>
    <tbody id='testing'>
    </tbody>
  </table>
</div>

</div>

见整页。

推荐阅读