通过Ajax加载内容后，Bootstrap Datatable不再起作用 [英] Bootstrap Datatable is no longer functioning after loading content via Ajax

问题描述

在有人说出重复的问题之前，我知道是这样.我只是无法找到任何人的脚本，这些脚本看起来与我的脚本相似，而且由于我是JavaScript和JQuery(用于php)的新手，所以我真的不知道自己在做什么.

Before some one says its a duplicate question, i know it is. I've just not been able to find anyone's script that looks similar to mine and as i'm completely new to JavaScript and JQuery (used to php) i don't really know what I'm doing.

我的数据表在使用php加载数据(在页面加载之前)时工作得很好，但是现在在页面加载之后加载了数据，该表已经失去了所有的筛选和分页功能.

My datatable worked perfectly having the data loaded using php (before the page had loaded) but now its loaded after the page load, the table has lost all of it's filtering and pagination.

这是我的表的加载方式.

Here is how my table is loaded.

<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>

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

This is the script that gets the data and puts it into the table.

<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毫秒一次，因此表中的数据始终与数据库保持最新.

If anyone could show me how to get this working in my example it would be greatly appreciated, I really want to load all of my tables on this site like this so i dont need to have a refresh on saving data (This refreshes every 250ms so the data in the table is always up to date with the database).

更新:

正确，我进行了250毫秒的刷新，现在该表可以完美运行了！现在有谁能够帮助我解决下一个问题.在将新数据输入数据库时​​如何刷新表，而不刷新整个页面

Right i took out my 250ms refresh and now the table works perfectly! is anyone now able to help me with my next issue. How do i get the table to refresh when new data is entered into the database, without refreshing the whole page

推荐答案

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

I suggest creating the table structure in HTML or PHP (not Javascript). Then load the data into the table with ajax. Those DOM elements are not readily available to javascript unless the event to create the elements is bound to an element that already exists like body or document or some other parent element of the table.

更新:

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

I personally don't have much experience with DataTables plugin. So the plugin will automatically create your DOM elements (table structure) based on either the data object returned from ajax or by properties you specify. DataTables does use jQuery's ajax() method to make ajax calls however you should not override the success callback. There is a proper way to use their API when making ajax calls as specified in the documentation. There is also a proper way to reload data on an interval to refresh your tables.

请查看此小提琴.

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

The ajax url, method, data properties must of course be updated to fit your application (this was the only way to simulate ajax call on jsFiddle. Please note you will have to have properly formatted JSON.

这篇关于通过Ajax加载内容后，Bootstrap Datatable不再起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！