数据表和 Firebase 网络答案

【问题标题】：Data Tables and Firebase Web数据表和 Firebase 网络
【发布时间】：2017-02-25 03:14:07
【问题描述】：

我在编写网络代码时遇到了一些问题

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

为什么数据表不能正确显示？感谢您的宝贵时间。

【问题讨论】：

“显示不正确”是什么意思？您需要向我们提供输入数据以及您希望看到的内容，以便我们提供帮助。
ibb.co/bYzpOv，数据在里面，有 3 条记录，但是数据表说没有可用的数据，并显示 0 条记录，即使表中显示了 3 条记录
这是因为您手动添加行而不是使用 DataTables。您需要在追加新行后再次调用$('#user_data').DataTable({ ...})，或者您需要使用DataTable 获取JS 数组的能力：datatables.net/examples/data_sources/js_array.html
是的，我知道。但是如何在完成追加行后调用数据表？我试图像这样交换脚本（oi64.tinypic.com/547ozb.jpg），但它不起作用。
它需要在rootRef.on('child_added', { ... }) 块内。这是一个异步回调。

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

【解决方案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();

【讨论】：

【解决方案2】：

首先你必须将datatable设置成var，例如var table=$("#tbl").... 稍后在 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"},
        ....
        ]

【讨论】：