引导数据表后通过Ajax加载的内容不再工作(Bootstrap Datatable is no lo

之前有人说，它的一个重复的问题，我知道它是。我只是没能找到任何人的脚本，类似于矿山，因为我完全陌生的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表。除非创造的元素的情况下被绑定到已经存在的元素等使那些DOM元素不容易获得的JavaScript body或document或表中的一些其它的父元素。

更新：

我个人没有与数据表插件太多经验。因此，插件将自动创建一个基于无论是你的DOM元素（表结构） data从阿贾克斯返回的对象或属性指定。数据表不使用jQuery的ajax()方法，使Ajax调用但是你不应该重写success回调。还有如文档中规定，让AJAX调用时使用他们的API有道。还有重装上的间隔数据刷新你的表有道。

请看看这个小提琴。

阿贾克斯url, method, data性能当然必须进行更新，以满足您的应用程序（这是为了模拟在的jsfiddle Ajax调用的唯一途径。请注意，您必须有正确的格式JSON。

Answer 2:

你有没有尝试过明确设置pagelength财产上的DataTable？

$('#datatable').dataTable( {
  "pageLength": 50
} );