通过 Ajax 加载内容后，Bootstrap 数据表不再起作用

Question

在有人说它是一个重复的问题之前，我知道它是。我只是无法找到任何与我相似的脚本，而且由于我对 JavaScript 和 JQuery（习惯于 php）完全陌生，我真的不知道自己在做什么。

我的数据表在使用 php 加载数据时工作得很好（在页面加载之前），但现在它在页面加载之后加载，表格已经失去了所有的过滤和分页。

这是我的表格的加载方式。

<div class="table-responsive">
    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
        <thead>
            <tr>
                <?php echo $tableheader;?>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <?php echo $tableheader;?>
            </tr>
        </tfoot>
        <tbody id="data"> <!--data will be inputed here-->

        </tbody>
    </table>
</div>

这是获取数据并将其放入表中的脚本。

<script>
    //call ajax
    var ajax = new XMLHttpRequest ();
    var method = "GET";
    var url = "data_assets.php";
    var asynchronous = true;

    setInterval(function(){
        ajax.open(method, url, asynchronous);
        //sending ajax request
        ajax.send();
    }, 250)

    //receiving response from data_assets.php
    ajax.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            //convert JSON back to array
            var data = JSON.parse(this.responseText);
            //console.log(data); //for debugging

            //html value for <tbody>
            var html ="";

            //looping through the data
            for (var a = 0; a < data.length; a++) {
                var asset_number = data[a].asset_number;
                var id = data[a].id;
                var room = data[a].room;
                var _location = data[a]._location;
                var sku = data[a].sku;
                var qty = data[a].qty;
                var _value = data[a]._value;
                var date = data[a].date;
                var po_number = data[a].po_number;
                var purchaced_from = data[a].purchaced_from;
                var notes = data[a].notes;
                var total = data[a].total;

                //storing in html
                html += "<tr>";
                    html += "<td style='vertical-align: middle;'>" + asset_number + "</td>";
                    html += "<td style='vertical-align: middle;'>" + id + "</td>";
                    html += "<td style='vertical-align: middle;'>" + room + "</td>";
                    html += "<td style='vertical-align: middle;'>" + _location + "</td>";
                    html += "<td style='vertical-align: middle;'>" + sku + "</td>";
                    html += "<td style='vertical-align: middle;'>" + qty + "</td>";
                    html += "<td style='vertical-align: middle;'>" + _value + "</td>";
                    html += "<td style='vertical-align: middle;'>" + total + "</td>";
                    html += "<td style='text-align: center; vertical-align: middle;'>" + date + "</td>";
                    html += "<td style='vertical-align: middle;'>" + po_number + "</td>";
                    html += "<td style='vertical-align: middle;'>" + purchaced_from + "</td>";
                    html += "<td style='vertical-align: middle;'>" + notes + "</td>";
                    html += "<td style='text-align: center; vertical-align: middle;'>";
                        html += "<a href='?id=" + id + "&room=" + room + "&asset=" + asset_number + "&location=" + _location + "&sku=" + sku + "&qty=" + qty + "&value=" + _value + "&date=" + date + "&po=" + po_number + "&where=" + purchaced_from + "&notes=" + notes + "#editModal' class=''><i class='far fa-edit fa-lg'></i></a>";
                    html += "</td>";
                    html += "<td style='text-align: center; vertical-align: middle;'>";
                        html += "<a href='?id=" + id + "&room=" + room + "&asset=" + asset_number + "&location=" + _location + "&sku=" + sku + "&qty=" + qty + "&value=" + _value + "&date=" + date + "&po=" + po_number + "&where=" + purchaced_from + "&notes=" + notes + "#duplicateModal' class=''><i class='far fa-clone fa-lg'></i></a>";
                    html += "</td>";
                html += "</tr>";
            }

            //replacing the <tbody> 
            document.getElementById("data").innerHTML = html;
        }
    }
</script>

如果有人能告诉我如何在我的示例中使用它，我将不胜感激，我真的很想像这样在这个网站上加载我的所有表格，所以我不需要刷新保存数据（这会刷新每 250 毫秒，因此表中的数据始终与数据库保持同步）。

更新：

没错，我进行了 250 毫秒的刷新，现在桌子可以正常工作了！现在有人可以帮助我解决下一个问题吗？当新数据输入数据库时​​，如何在不刷新整个页面的情况下刷新表

Answer 1

我建议用 HTML 或 PHP（不是 Javascript）创建表结构。然后用ajax将数据加载到表中。除非创建元素的事件绑定到已经存在的元素，例如 body 或 document 或表格的其他父元素，否则这些 DOM 元素不容易被 javascript 使用。

更新：

我个人对 DataTables 插件没有太多经验。因此，插件将根据从 ajax 返回的 data 对象或您指定的属性自动创建您的 DOM 元素（表结构）。 DataTables 确实使用 jQuery 的 ajax() 方法进行 ajax 调用，但是您不应该覆盖 success 回调。在按照文档中的说明进行 ajax 调用时，有一种正确的方法可以使用他们的 API。还有一种适当的方法可以按时间间隔重新加载数据以刷新表。

请查看此fiddle。

当然，必须更新 ajax url, method, data 属性以适合您的应用程序（这是在 jsFiddle 上模拟 ajax 调用的唯一方法。请注意，您必须具有正确格式化的 JSON。