Question

我正在创建一个网页，以表格的形式显示来自两个不同位置的数据。我有一个选择下拉菜单来选择位置。在选择位置时，我想更改表格内容以匹配该位置。

我已经拥有表内容所需的HTML字符串（在页面加载时从python脚本获取的php变量中），我只需要能够用新字符串替换当前表数据。 / p>

我在网上看过，但我找到的所有答案都是关于替换各行中的数据。

这就是我所拥有的：

HTML：

<select name="site_switch_location" id="site_switch_location" 
onchange="changeTableData()">
  <?php echo $resultData["site_switch_fill"] ?>
</select>

<table id="all_data" align="center">
  <?php echo $resultData["table_fill"][$_SESSION["location"]] ?>
</table>

使用Javascript：

<script type="text/javascript">
  function changeTableData() {
    var new_location = document.getElementById("site_switch_location").value;
    var table_data = <?php echo $resultData["table_fill"][new_location] ?>;
    document.getElementById("all_data").innerHTML = table_data;
  }
</script>

Answer 1

使用jQuery框架，您可以创建一个请求服务器端并返回响应的基础结构。由于PHP是服务器端语言，因此数据只表示一次，因此，我们可以在后台向服务器发送HTTP请求以刷新数据页面。

$(function () {
    var currentPagination = 1;
    $.get('/path/to/file/or/dynamic/route', { pagination: currentPagination++ })
        .done(function(content) {
            // your code logic to fill the table
            console.log(content);
        }
    );
});

您的PHP文件看起来与此类似：

if(empty($_GET['pagination']) || !isset($_GET['pagination'])) exit();
$entity = new PDO(); # your credentials
$entity->setAttributes(); # your attributes ie ERR_MODE
$query = $entity->prepare('SELECT x,y,z FROM table WHERE id > ? LIMIT 1');
$query->execute(array($_GET['pagination']));
header('Content-Type: application/json');
die(json_encode($query->fetch());

所以你所做的就是增加分页（即相应数据的列id），传递一个长的HTTP并使用AJAX用信息更新表。

有没有办法用javascript用新数据替换整个表？

1 个答案: