Question

当我单击任意行的排序时，表主体为空。我从firebase加载数据，然后一旦能够检索数据就将其附加到表主体上。

这是我的html代码

<div class="card" style="padding: 10px; margin: 50px;">
    <table id="myTable" class="display table-responsive-sm">
        <thead>
            <tr>
                <th>Last activity</th>
                <th>Email</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody id="tableBody">

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

这是我的JavaScript代码，它只是初始化数据表并通过loadUsers函数从firebase检索数据

$(document).ready( function () {
    $('#myTable').DataTable();
} );

window.onload = function(){
    admin.load();
}

var admin = {

    database: null,

    load: function(){
        firebase.initializeApp(config);
        this.database = firebase.database();
        this.loadUsers();
    },

    loadUsers:function(){
        let usersRef = this.database.ref('users');
        usersRef.orderByChild("info/lastMessage").on("value", (snapshot) => {
            $('#tableBody').empty();
            snapshot.forEach((child) => {
                $('#tableBody').append('\
                <tr>\
                    <td>'+moment(child.val().info.lastMessage).format('D MMM h:mm:ss A')+'</td>\
                    <td>'+child.val().info.email+'</td>\
                    <td align="center"><button data-toggle="modal" data-target="#exampleModal" type="button" class="btn btn-sm btn-outline-danger">Block</button></td>\
                    <td align="center"><button type="button" class="btn btn-sm btn-outline-danger">Delete Messages</button></td>\
                </tr>\
                ')
            });
        });
    },
}

Answer 1

您在发生{strong>之前 ready事件（在其中添加表数据）之前发生的load事件中初始化DataTables插件。

相反，您需要在添加数据后初始化DataTables插件。

例如（未测试）：

$(window).on('load', function() {
    admin.load();
    $('#myTable').DataTable();
});

我对Firebase并不熟悉，但是如果有可用数据时它会返回Promise，那么您需要初始化DataTables插件以作为对事件的响应。

或者，您可以在之前初始化DataTables插件，然后使用row().add() API方法将数据添加到表中。最好选择这种方法，因为它看起来更干净，可以生成HTML标记。

排序上，表主体为空

1 个答案: