将数据从Firestore显示到引导HTML表中

Question

我想将我的 CoverTransaction 集合中的数据显示到引导表中。虽然可以正确检索数据（显示在控制台中），但是当我从Firestore加载数据时，诸如 show条目，分页之类的引导程序功能似乎无法正常工作。使用Bootstrap表是造成这种情况的原因吗？

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>