如何解决PHP加载MySQL数据的Datatable定时刷新无法获取最新值的问题

核心错误原因 #

你的代码逻辑混淆了服务端代码（PHP）和客户端代码（JS）的执行时机：PHP代码仅在页面首次请求服务端时执行一次，渲染到浏览器后所有PHP逻辑已经结束，你写在setInterval里的PHP代码实际在页面加载时就已经生成了固定值，后续JS定时执行时不会重新触发服务端的MySQL查询，因此永远拿不到最新数据。

调整后的实现代码 #

1. 修改data.php，让它独立返回JSON格式数据 #

<?php
include "connect.php";
// 声明返回数据格式为JSON
header('Content-Type: application/json');
$sqlAdmin = mysqli_query($connection, "SELECT FROM_UNIXTIME(lastChange) as new_date,pair, percentage, delta_t, current_price, last_price FROM testdatabase.table ORDER BY id DESC LIMIT 0,100;");    
$locations = array();
while($res = mysqli_fetch_array($sqlAdmin)) {
    $locations[] = array($res['new_date'], $res['pair'], $res['percentage'], $res['delta_t'], $res['current_price'],$res['last_price']);
}
// 直接输出JSON数据，供前端异步调用
echo json_encode($locations);
exit;
?>

2. 修改index.php的JS逻辑，用AJAX异步拉取数据更新表格 #

原HTML结构和首次引入data.php的逻辑不用动，仅修改JS部分即可：

// 初始化Datatable，保留首次加载逻辑
var table = $('#example').DataTable({
    data: <?php echo json_encode($locations); ?>,
    // 你的其他Datatable配置项保持不变
});

// 定时刷新逻辑
var refreshId = setInterval(function() {
    // 异步请求data.php获取最新数据
    $.getJSON('data.php', function(newData) {
        console.log('Refresh ... ', newData);
        // 调用Datatable官方API更新数据，无需重新初始化表格
        table.clear();
        table.rows.add(newData);
        table.draw();
    });
}, 5000);

实现说明 #

• 不需要将整个Datatable放到独立PHP文件刷新，异步拉取数据局部刷新的性能更好
• 调整后data.php只负责提供数据，和页面渲染逻辑解耦，后续维护更方便
• 直接调用Datatable自带的API更新数据，保留你已经配置的排序、分页等所有特性，不会出现重新初始化表格的闪烁问题

内容的提问来源于stack exchange，提问作者Martin Bozek