数据表第一行无可用数据答案

【问题标题】：No data available in first line of data table数据表第一行无可用数据
【发布时间】：2021-04-02 14:17:19
【问题描述】：

从 firebase 获取数据后，数据表中的第一行显示没有可用数据。我应该如何纠正这个问题？

我知道我只使用了一个数据集，但我尝试使用 10 个数据，它仍然显示第一行中没有可用的数据。

我尝试了我所知道的一切，但没有任何效果。

我的js代码

    $(document).ready(function() {
    $('#user_data').DataTable({
        dom: 'Bfrtip',

        colums: [
            { title: "USN" }, { title: "Email" }, { title: "Name" }, { title: "Password" }
        ],
        targets: -1,
        className: 'dt-body-right',
        hover: 1,

    });
 });
 var rootRef = firebase.database().ref().child("StudentID");

 rootRef.on("child_added", snap => {
    
    USN = snap.child("UserUSN").val();
    Email = snap.child("Useremail").val();
    Name = snap.child("Username").val();
    Password = snap.child("Userpassword").val();


      $("#table-body-pengguna").append("<tr><td>" + USN + "</td><td>" + Email +
          "</td><td>" + Name + "</td><td>" + Password + "</td></tr>");
 })

我的html代码

    <body>
    <table id="user_data" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
               <th>USN</th>
               <th>Email</th>
               <th>Name</th>
               <th>Password</th>
           </tr>
        </thead>

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

        </tbody>
       </table>

【问题讨论】：

将您自己的 html 行插入现有的 DataTable 实例是错误的方法。使用 API 方法将数据传递给实例，以便它知道它存在。
感谢它现在没有显示错误
console.log('rootRef',rootRef) 得到了什么。我不熟悉火力基地。刚看了文档。我看到你的代码是正确的。您不需要创建表打击。您必须改为创建一个 json 字符串。就像我在下面的例子中一样。查看示例，例如firebase.google.com/docs/reference/js/…

标签： javascript jquery datatable datatables

【解决方案1】：

$(document).ready(function() {
  $('#example').DataTable({
  "pageLength": 1,
    ajax: "https://raw.githubusercontent.com/bmehler/employees/main/personal",
    "columns": [{
        "data": "id"
      },
      {
        "data": "name"
      },
      {
        "data": "job"
      },
    ]
  });
});

<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Job</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Job</th>
            </tr>
        </tfoot>
    </table>

试试这个小例子。

【讨论】：

是的，它可以工作，但我希望它与 firebase 连接你能提供我一个 firebase 连接的例子吗？谢谢你的帮助