为什么即使表中的数据可用，也会显示“表中没有数据”消息

Question

我创建了一个数据表，其中包含来自fire-base数据库的数据。它完美地显示了所有数据但是“表中没有数据”消息显示在表体的顶部。为什么？当我点击“升序和降序按钮或搜索框”表时，表格变空。

<table class="table table-striped table-bordered table-hover" id="example">
    <thead>
      <tr>
        <td  class="th">Title</td>
        <td  class="th">First Name</td>
        <td  class="th">Last Name</td>
        <td  class="th">Hospital</td>
        <td  class="th">Spciality</td>
        <td  class="th">Doctor Fee</td>
        <td  class="th">Mobile Number</td>
        <td  class="th">Address</td> 

      </tr>
    </thead>
    <tbody>

    </tbody>
</table> 

[![<script type="text/javascript">
 var rootRef = firebase.database().ref("User/doctor");

  rootRef.on("child_added",snap =>{
  var fname=snap.child("Firstname").val();
  var lname=snap.child("Lastname").val();
  var id=snap.child("DoctorID").val();
  var dob=snap.child("DOB").val();
  var address=snap.child("Doctor_Address").val();
  var email=snap.child("E-mail").val();
  var mobile=snap.child("Mobile_no").val();
  var hometp=snap.child("Home_no").val();
  var sex=snap.child("Sex").val();
  var hospital=snap.child("Hospital").val();
  var slmcno=snap.child("SLMC_Number").val();
  var speciality=snap.child("Spciality").val();
  var emargancyperson=snap.child("Emargency_person").val();
  var emargancyrelationship=snap.child("Emargency_reletionship").val();
  var emargancymobile=snap.child("Emargency_TP").val();
  var fee=snap.child("Doctor_fee").val();
  var nic=snap.child("NICNo").val();
  var title=snap.child("Title").val();

  //var lname=snap.child("DocotID").val();

  $("#example").append("<tr><td>"+title+"</td><td>"+fname+"</td><td>"+lname+"</td><td>"+hospital+"</td><td>"+speciality+"</td><td>"+"Rs."+fee+".00"+"</td><td>"+mobile+"</td><td>"+address+"</td></tr>");

 });
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: \[
            'copy', 'csv', 'excel', 'pdf', 'print'
        \]
    } );
</script>][1]][1]

Answer 1

我对Firebase不熟悉，但看起来下面的函数是一个从数据库中提取数据的方法，然后在前端添加你的表。

var rootRef = firebase.database().ref("User/doctor");

rootRef.on("child_added",snap =>{
  var fname=snap.child("Firstname").val();
  ...
  $("#example").append("<tr><td>"+title+"</td><td>"+fname+"</td><td>"+lname+"</td><td>"+hospital+"</td><td>"+speciality+"</td><td>"+"Rs."+fee+".00"+"</td><td>"+mobile+"</td><td>"+address+"</td></tr>");

});

如果我的假设是正确的，那么我认为您的问题可能是您没有正确使用数据表。连接到DB需要时间，因此您可能需要在从数据库中完全提取数据之前初始化表。所以发生的事情是你的表初始化没有数据，然后你将数据添加到表中。因为您是通过jQuery手动添加数据，所以表格不知道隐藏无数据消息，这是插件的一个组件。

当您说您排序或搜索并获得一个空表时，您可能会看到上述方案的副作用，其中表有数据，但数据表并不知道关于它，因为你从未将它添加到数据表中。

您需要在将数据添加后将表初始化，或者在数据库提取之前初始化表并使用datatables api更新数据表

我通常会做第二个，所以在这种情况下，你只需要在数据库提取之前将表初始化移动到，然后将jquery更改为数据表api调用。

var datatable = $('#example').DataTable({
  dom: 'Bfrtip',
  buttons: [
    'copy', 'csv', 'excel', 'pdf', 'print'\
  ]
});

var rootRef = firebase.database().ref("User/doctor");

rootRef.on("child_added", snap => {

  var fname = snap.child("Firstname").val();
  //Other columns here

  var data = {
    "nfname": nfname
  };
  datatable.row.add(data)

});