3

I want to display data from my CoverTransaction collection into a bootstrap table. Although the data is retrieved correctly(displayed in console) but the bootstrap features like show entries, pagination seems to not work when I load data from firestore. Is using Bootstrap tables the cause for this?

enter image description here

const coverTransTableBody = document.getElementById('coverTrans_fields');
const CoverTransactionRef = db.collection('HdCoverTransaction');
[![enter image description here][1]][1]
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>
Ruzna
  • 31
  • 8
  • can u create a fiddle plz – sayalok Oct 09 '19 at 10:04
  • @sayalok May I post an image of my interface for reference? – Ruzna Oct 09 '19 at 10:13
  • what is `CoverTransactionRef` ? its gives undefined when i run ur snippet – sayalok Oct 09 '19 at 10:17
  • and plz check the console if there is any error – sayalok Oct 09 '19 at 10:19
  • It is the reference to my firestore collection. I updated my code. and there is no errors only the pagination, search and entries of the bootstrap are not working. – Ruzna Oct 09 '19 at 10:25
  • you use this data tables right ? `https://datatables.net/examples/styling/bootstrap` what happend if you use static data ? – sayalok Oct 09 '19 at 10:28
  • @sayalok for static data pagination and other properties works properly. That's what am confused about. Does it not work for dynamic data? – Ruzna Oct 09 '19 at 10:32
  • yes it does . the problem is occurred when you are injecting ur html. so plz check the html when you injecting ur dynamic data . match both static and dynamic html structure and find what is missing – sayalok Oct 09 '19 at 10:34

0 Answers0