javascript - 使用带有动态 header 的数据表在我的网站上显示 mysql 结果

Question

所以我有一个正在开发的工作网站。它允许销售人员进入并输入日期范围和他们的姓名缩写，它会查询我的数据库并将表格及其数据返回给他们。我提取的列数量取决于他们选择的日期范围。时间段越长，列数就越多(我将其逐周分开，所以更多天=更多周)

我遇到的问题是，当我动态拉动列标题时，使用 for 循环从 mysql 查询中获取标题，以便它是动态的，我不必为他们可以选择的每周的每个案例进行编码，标题替换了表格中的第一项，因此我丢失了一行。

我想知道是否有人有动态抓取 mysql 查询集的列标题并将其与数据表一起使用的经验？

我不想粘贴大量代码并聚集这篇文章，所以请告诉我您想看到什么，我会提供它。

提前感谢您提供的所有帮助，我希望我对我的问题没有太困惑。

以下是代码示例:

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

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("Connection Failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM sampleTable";

$result = $conn->query($sql);
$conn->close();
?>

<div class="card mb-3">
    <div class="card-header">
        <i class="fa fa-table"></i></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="adminTable" width="100%" cellspacing="0">
                <thead>
                    <?php
                    if ($result->num_rows > 0) {
                        echo "<tr>";
                        foreach(array_keys($result->fetch_assoc()) as $field){
                            echo "<th>" . $field . "</th>";
                        }
                        echo "</tr>";
                    } else {
                        echo "<h1 align=\"center\">No Results Found</h1>";
                    }
                    ?>
                </thead>
                <tbody>
                    <?php
                    if ($result->num_rows > 0) {
                        while($data = $result->fetch_assoc()) {
                            echo "<tr>";
                            foreach ($data as $field => $value){
                                echo "<td>" . $value . "</td>";
                            }
                            echo "</tr>";
                        }
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div>
</div>

<!--Not included in current file - included in base php-->
<script type="text/javascript">
    $('#dataTable').DataTable( {
        "scrollX": true,
        "scrollY": '55vh',
        "scrollCollapse": true,
        "paging": false,
        dom: 'iftB',
        buttons: [
        'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
</script>

Answer 1

只需将第一次获取的结果放入变量中，然后在获取其他行之前回显它:

 <table class="table table-bordered" id="adminTable" width="100%" cellspacing="0">
            <thead>
                <?php
                if ($result->num_rows > 0) {
                    echo "<tr>";
                    $firstRow = $result->fetch_assoc();
                    foreach(array_keys( $firstRow ) as $field){
                        echo "<th>" . $field . "</th>";
                    }
                    echo "</tr>";
                } else {
                    echo "<h1 align=\"center\">No Results Found</h1>";
                }
                ?>
            </thead>
            <tbody>
                <?php
                if ($result->num_rows > 0) {
                        echo "<tr>";
                        foreach ($firstRow as $field => $value){
                            echo "<td>" . $value . "</td>";
                        }
                        echo "</tr>";

                    while($data = $result->fetch_assoc()) {
                        echo "<tr>";
                        foreach ($data as $field => $value){
                            echo "<td>" . $value . "</td>";
                        }
                        echo "</tr>";
                    }
                }
                ?>
            </tbody>
        </table>