可使用 AJAX/JSON 自动更新

auto update dynatable with AJAX/JSON

本文关键字:更新 JSON AJAX 可使用      更新时间:2023-09-26

我现在有点迷茫,因为我的代码似乎可以工作,但我的表不感兴趣。 xD

我正在将数据从我的数据库加载到表中,我希望它每三秒"自动更新"。我的 JSON 数据正确,js 控制台会显示更新的数据。但是我的表不想显示它,所以我必须刷新整个页面。然而,这不是我想做的。

这是我的代码(HTML+JS):

<script>
$(document).ready(function() {
    setInterval(function() {``
  $.ajax({
      url: "myStuff.php",
      success: function(data) {
          console.log(data);
          myRecords = $.parseJSON(data);
          $("#dynatable").dynatable({
              dataset: {
                  records: myRecords
              }
          });
      }
  });
    }, 3000);
});

<table id="dynatable">
    <thead>
    <th>test1</th>
    <th>test2</th>
    </thead>
    <tbody>
    </tbody>
</table>

.PHP:

$response = array();
    while ($zeile = mysqli_fetch_array($db_erg, MYSQL_ASSOC)) {

    $response [] = array(
        "test1" => $zeile['wasd'],
        "test2" => $zeile['wasdf']
    );
}
echo json_encode($response);

当我将数据添加到我的数据库时,返回的 JSON 数据会更新,我在 js 控制台中看到它。问题是我的表不想显示它,它只显示"旧"数据。

有什么建议可以解决这个问题吗?

-------------------------------------------------------------

编辑:

我现在明白了!这帮助我解决了我的问题。感谢您的帮助!:)这是我的代码:

$(document).ready(function() {
    setInterval(function() {
        $.ajax({
            url: "myStuff.php",
            success: function(data) {
                console.log(data);
                var myRecords = $.parseJSON(data);
                var dynatable = $('#dynatable').dynatable({
                    dataset: {
                        records: myRecords
                    }
                }).data('dynatable');
                dynatable.settings.dataset.originalRecords = myRecords;
                dynatable.process();
            }
        });
    }, 3000);
});

此代码还可以更新表。

<script>
$(document).ready(function() {
    var mytable = $("#dynatable");
    setInterval(function() {
        $.ajax({
            url: "do.php",
            success: function(data) {
                myRecords = $.parseJSON(data);
                mytable.dynatable({
                    dataset: {
                        records: myRecords
                    }
                });
                mytable.data('dynatable').settings.dataset.records = myRecords;
                mytable.data('dynatable').dom.update();
                console.log(data);
            }
        });
    },
    1000);
});
</script>