Добавить данные в Dataatable с помощью Firebase

Question

В таблице отображается «Нет данных», но данные добавлены в таблицу. TableImage [1]

это мой firebaseimage

вот мой HTML-код:

<div class="box box-success">
    <div class="box-header">
      <h3> Sales </h3> 
          <table id="orders" class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>Product</th>
                <th>Price</th>
                <th>Quantity</th>
                <th>Date Ordered</th>
                <th>Date Delivered</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody id="example">   
            </tbody>
        </table>
    </div>
  </div>

мой код JavaScript:

 $('#orders').dataTable();
 var rootRef = firebase.database().ref().child("sales/");
 rootRef.on("child_added", snap => {
     var key = snap.key;
     var product = snap.child("product").val();
     var price = snap.child("price").val();
     var quantity = snap.child("quantity").val();
     var date_ordered = snap.child("date_ordered").val();
     var date_delivered = snap.child("date_delivered").val();

     $("#example").append("<tr id='" + key + "'><td>" + key + "</td><td>" +
         product + "</td><td>" + price + "</td><td>" + quantity + "</td><td>" +
         date_ordered + "</td><td>" + date_delivered + "</td><td>" +
         "<a href = 'product_list.html' > View < /a></td > < /tr>");
 });

Кто-нибудь может мне помочь? пожалуйста ..: (

Answer 1

У меня есть небольшое улучшение для вашего кода, вы можете проверить его ниже. Я думаю, вы должны попытаться заставить его работать с необработанной таблицей HTML, прежде чем использовать плагин dataTable. Я не знаю, какой плагин dataTable вы используете, но, возможно, вы получили «Нет доступных данных», потому что в момент его запуска ваша таблица пуста.

var rootRef = firebase.database().ref().child("sales/");
rootRef.on("child_added", snap => {
     var row = snap.val();
     var key = snap.key;
     var product = row.product;
     var price = row.price;
     var quantity = row.quantity;
     var date_ordered = row.date_ordered;
     var date_delivered = row.date_delivered;

     $("#example").append("<tr id='" + key + "'><td>" + key + "</td><td>" +
         product + "</td><td>" + price + "</td><td>" + quantity + "</td><td>" +
         date_ordered + "</td><td>" + date_delivered + "</td><td>" +
         "<a href = 'product_list.html' > View < /a></td > < /tr>");
 });