Data Tables and Firebase Web

问题:

i have some problem when i code my web

here's the Html

<table id="user_data" class="display" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Email</th>
                            <th>No.Hp</th>
                            <th>Status</th>
                        </tr>
                    </thead>

                    <tbody id="table-body-pengguna">

                    </tbody>
                </table>

And here's the Script

$('#user_data').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'csv'
    ]
});
var rootRef = firebase.database().ref().child("users");

rootRef.on("child_added", snap => {
    var name = snap.child("name").val();
    var email = snap.child("email").val();
    var noHP = snap.child("noHp").val();
    var status = snap.child("status").val();

    $("#table-body-pengguna").append("<tr><td>" + name + "</td><td>" + email +
        "</td><td>" + noHP + "</td><td>" + status + "</td></tr>");
})

And here's the output

https://ibb.co/bYzpOv

Why the Datatables not displaying properly? Thanks for your time.

回答1:

This should work perfectly

    rootRef.on("child_added", snap => {
         var dataSet = [snap.child("name").val(), snap.child("email").val(), snap.child("blood").val(), snap.child("Phone").val(), snap.child("Location").val()];
    table.rows.add([dataSet]).draw();

回答2:

first you must to set datatable into var, for example var table=$("#tbl").... later on child_added event table.row.add({id:15,user_name:"Jacob",...}).draw(false);

When you're creating the datatable you must to set name to columns.

"columns":[
        {name:"id", "data":"id", "visible":false},
        {name:"user_name", "data":"user_name"},
        ....
        ]