При сортировке тело таблицы пустое

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

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

Вы инициализируете плагин DataTables в событии ready, которое происходит до load события, когда вы добавляете данные таблицы.

Вместо этого вам нужно инициализировать плагин DataTables после добавление данных.

Например (не проверено):

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

Я не знаком с Firebase, но если он возвращает Promise, когда данные доступны, вам нужно инициализироватьплагин DataTables как ответ на событие, когда это происходит.

В качестве альтернативы вы можете инициализировать плагин DataTables до получения данных и использовать row().add() метод API для добавления данныхк столу.Это может быть предпочтительнее, так как выглядит намного чище, чем генерирование HTML-разметки.