数据表和Firebase Web

时间:2017-02-25 03:14:07

标签: javascript jquery firebase datatables firebase-realtime-database

我在编写网页时遇到了一些问题

这里是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>

这是脚本

$('#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>");
})

这是输出

https://ibb.co/bYzpOv

为什么数据表无法正常显示?谢谢你的时间。

2 个答案:

答案 0 :(得分:1)

这应该可以完美地运作

    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();

答案 1 :(得分:0)

首先必须将datatable设置为var,例如var table = $(&#34;#tbl&#34;).... 稍后关于child_added事件table.row.add({id:15,user_name:"Jacob",...}).draw(false);

当您创建数据表时,必须将名称设置为列。

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