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。

Answer 2

您是否试图在数据表上显式设置pagelength属性？

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

通过Ajax加载内容后，Bootstrap Datatable不再起作用

2 个答案: