Afișarea datelor din firestore în tabel HTML bootstrap

voturi
1

Vreau să afișeze datele din contul meu CoverTransaction colecție într - un tabel bootstrap. Cu toate că datele sunt preluate în mod corect (afișat în consolă) , dar caracteristicile de bootstrap , cum ar fi afișează intrările, paginare nu pare să funcționeze atunci când am încărca datele de la firestore. Este folosind tabele bootstrap cauza pentru asta?

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>

Întrebat 09/10/2019 la 13:01
sursa de către utilizator
În alte limbi...                            


1 răspunsuri

voturi
-1

Poate fi necesar să adăugați dependențele Bootstrap în fișierul 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>

Lasă-mă să știu dacă funcționează.

Publicat 09/10/2019 la 13:30
sursa de către utilizator

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