Отображение данных из FireStore в начальную загрузку HTML-таблицу

голоса
1

Я хочу , чтобы отобразить данные из моей CoverTransaction коллекции в загрузочный стол. Несмотря на то, что данные правильно извлекаются (отображается в консоли) , но функция начальной загрузки , как показывают записи, нумерация страниц , кажется, не работает , когда я загрузить данные из FireStore. Является ли с помощью Bootstrap столов причины для этого?

const coverTransTableBody = document.getElementById('coverTrans_fields');

CoverTransactionRef.get().then(snapshot => {
  var content = '';

  snapshot.docs.forEach(doc => {

    var coverSummary = doc.data();
    console.log(coverSummary);
    let html = `<tr>
            <td>${doc.id}</td>
            <td>${coverSummary.ReceiptNo}</td>
            <td>${coverSummary.TransType}</td>
            <td>${coverSummary.OpenStock}</td>
            <td>${coverSummary.TotalQty}</td>
            <td>${coverSummary.ClosingStock}</td>
            </tr>`;
    content += html;
    coverTransTableBody.innerHTML = content;

  }, error => {
    console.log(error.message);
  });
});
<!-- Jquery DataTable Plugin Js -->
<script src=plugins/jquery-datatable/jquery.dataTables.js></script>
<script src=plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js></script>
<script src=js/pages/tables/jquery-datatable.js></script>

<div class=table-responsive>
  <table id=tabel_CoverTrans_details class=table table-bordered table-striped table-hover js-basic-example dataTable>
    <thead>
      <tr>
        <th>Date & Time</th>
        <th>Receipt No</th>
        <th>Rec/Iss</th>
        <th>Open Stock</th>
        <th>Total Qty</th>
        <th>Closing Stock</th>
      </tr>
    </thead>
    <tbody id=coverTrans_fields>
    </tbody>
  </table>
</div>

Задан 09/10/2019 в 13:01
источник пользователем
На других языках...                            


1 ответов

голоса
-1

Вы можете добавить бутстрапом зависимостей в вашем HTML-файле.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"> </script>

Дайте мне знать, если он работает.

Ответил 09/10/2019 в 13:30
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more