Question

我的面板中有一个用户表，使用以下Php代码：

<html>
<body>
<div id="order_table">
    <table>
        <thead>
        <tr>
            <th>Name</th>
            <th>Mobile</th>
        </tr>
        </thead>
        <?php
        Include_once("db/connection.php");
        $stmt_select_users = $conn->prepare("SELECT name,mobile FROM api_user order by create_date DESC limit 5;");
        $stmt_select_users->execute();
        while ($row_select_users = $stmt_select_users->fetch(PDO::FETCH_ASSOC)) {
            ?>
            <tr>
                <td><?php echo $row_select_users['name']; ?></td>
                <td><?php echo $row_select_users['mobile']; ?></td>
            </tr>
            <?php
        }
        ?>
    </table>
</div>
</body>
</html>

我了解以下功能：

$(document).ready(function () {
   setInterval(function () {
       $("#order_table").load("users_table.php")
   }, 3000);
});

但是我不想更新整个表，就算插入一行，表也要添加该行。 有什么帮助吗？

Answer 1

您应该创建一个仅返回所需记录的PHP文件，并使用javascript操作该表。

假设您有返回HTML表格行元素的脚本，例如：

<tr>
    <td>Some value</td>
    <td>Another value</td>
</tr>

您可以做类似的事情。

$(document).ready(function () {
    setInterval(function () {
        $.get("my-script.php", function(data) {
            $("#order_table table").append(data);
        });
   }, 3000);
});

有关更多信息，http://api.jquery.com/append/和https://api.jquery.com/jquery.get/

希望我能帮上忙。

编辑：代码示例

免责声明：这是一个非常简单的代码段，您应该执行验证和优化。

<?php
// request.php
$data = [
    ['valor 1 - linha 1', 'valor 2 - linha 1'],
    ['valor 1 - linha 2', 'valor 2 - linha 2'],
    ['valor 1 - linha 3', 'valor 2 - linha 3'],
];

$afterIndex = $_GET['afterIndex'];
$count = sizeof($data);

$tableRows = [];
if ($afterIndex < $count)  {
    for ($i = $afterIndex; $i < $count; $i++) {
        $item = $data[$i];
        $tableRows[] = '<tr><td>' .$item[0] . '</td><td>' . $item[1] . '</td></tr>';
    }
}

echo json_encode([
    'index' => $count, 
    'rows' => $tableRows
]);

数据数组是对数据库的模拟，请根据需要修改代码。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    $(document).ready(function () {
        var index = 0;
        setInterval(function () {
            $.get("/request.php?afterIndex="+index, function(data) {
                var response = JSON.parse(data);
                index = response.index;
                for (var i = 0; i < response.rows.length; i++) {
                    $("#order_table table tbody").append(response.rows[i]);
                }
            });
    }, 3000);
    });
  });
  </script>

上面的脚本向php代码发出请求，并在表中呈现响应行。

该表类似于：

<div id="order_table">
    <table>
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

如果数据库更改，则更新html数据表

1 个答案: