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?
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>