php - Bootstrap 表使用连续数据从 MySQL 轮询更新

Question

我使用 bootstrap 表来表示存储在 MySQL 中的数据(每秒都有新数据涌入数据库)，并在单独的 PHP 文件中使用以下代码片段来查询它们并将其呈现在前端 UI 上:

Query.php

$sql = 'SELECT * FROM table WHERE date = (SELECT MAX(date) FROM table) LIMIT 5;'
while ($row = $result1->fetch_assoc())
{
    $str='<tr><td>' . $row['ID'] . '</td>';
    $str1='<td>' . $row['keyword'] . '</tr></td>';
    echo $str;
    echo $str1;
}

在前端，我有一个简短的 JS 每秒对数据库进行一次轮询:

index.php
<div class="panel-body">
 <div>
  <table class="table table-inverse table-striped table-bordered">
   <thead>
    <th>ID</th>
    <th>Keyword</th>
   </thead>
    <tbody id="display" >
    </tbody>
  </table>
  </div>

  //other html code
    $(document).ready(function() {
        setInterval(function() {
            $.post('query.php', function(data) {
                $('#display').prepend(data);
            });
        }, 1000);
    });

它每秒查询数据并显示它并附加数据，工作得很好。但是，我希望在表上添加附加操作。例如，限制 10 行，每秒更新一次并删除最早的行。

我正在寻求实现的目标的一个很好的例子: https://blockchain.info/ (在“最新交易”栏下)

Answer 1

声明你的 table 的高度。在 ajax 中，使用 prepend() 函数将最新记录合并到表格顶部。希望你明白我在说什么。如果您需要帮助，我很乐意为您提供指导