实时更新HTML表格的最佳方式

Question

背景资料

我有一个包含一些数据的html表。应始终突出显示第一个数据行。基本上，该表由两个重要的列组成。一个是Title，表中的另一列是Votes。该表应按此列排序（降序，大多数投票在顶部）。这个信息只是为了更好地理解而且非常无关紧要，因为我已经在后端订购了数据。

---

现在回答这个问题。该表位于没有用户交互的站点上，仅用于演示。表中的数据由另一个站点更改，并存储在Postgres数据库中。我正在寻找更新此表的好方法。目前我通过使用PHP生成代码并使用刷新页面全部5来完成此操作

setTimeout(function() {
     window.reload(1);
}, 5000);

我不认为这是一个很好的解决方案，因为如上所述，该网站是一个演示文稿，如果网站一直加载几毫秒，它看起来不太好。

我的想法是定期发送ajax请求，获取新数据（作为JSON）并更新表。我想我必须为此创建一个API。目前该表还具有8行的固定大小。

我是否必须完全删除所有行并再次插入行，或者是否有一些很好的方法可以在JS中实现这一点？是否可以确定数据库是否已更改并且仅在此情况下发送数据？在我投入大量时间之前，我想获得一些专业知识。

Answer 1

您应该使用websockets来构建正确的实时应用程序。如果你不想从头开始使用像推动器这样的库。 https://pusher.com/docs/libraries

Answer 2

你可以用jQuery ajax和你的5秒来做到这一点

    $.ajax({
        type: "POST",
        url: "vote_table.php",
        data: {
            method: "easy_call"
        },
        success: function(content) {
            $("#table").text(content);
        }
    });

http://api.jquery.com/jquery.ajax/

Answer 3

是的，您正好考虑使用AJAX并创建API，因为每次加载整个页面都不利于用户体验。

而且，创建API很好，因为与HTML相比，它会减少数据大小。

在我看来，您应该只检查数据库中的更新并仅在更新时获取数据，因此它将减少频繁请求中的数据大小。

为了创建和更新表格，我建议你使用jQuery Datatables。因为它是一个已经配置好的库，它可以简化您的表处理并提供基本工具。

希望它会有所帮助。