title: Displaying data from firestore into bootstrap HTML table
body: <p>I want to display data from my <em>CoverTransaction</em> collection into a bootstrap table. Although the data is retrieved correctly(displayed in console) but the bootstrap features like <em>show entries, pagination</em> seems to not work when I load data from firestore. Is using Bootstrap tables the cause for this?</p>
  
  <p><a href="https://i.stack.imgur.com/tX0E4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tX0E4.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const coverTransTableBody = document.getElementById('coverTrans_fields');
  const CoverTransactionRef = db.collection('HdCoverTransaction');
  [![enter image description here][1]][1]
  CoverTransactionRef.get().then(snapshot =&gt; {
    var content = '';
  
    snapshot.docs.forEach(doc =&gt; {
  
      var coverSummary = doc.data();
      console.log(coverSummary);
      let html = `&lt;tr&gt;
              &lt;td&gt;${doc.id}&lt;/td&gt;
              &lt;td&gt;${coverSummary.ReceiptNo}&lt;/td&gt;
              &lt;td&gt;${coverSummary.TransType}&lt;/td&gt;
              &lt;td&gt;${coverSummary.OpenStock}&lt;/td&gt;
              &lt;td&gt;${coverSummary.TotalQty}&lt;/td&gt;
              &lt;td&gt;${coverSummary.ClosingStock}&lt;/td&gt;
              &lt;/tr&gt;`;
      content += html;
      coverTransTableBody.innerHTML = content;
  
    }, error =&gt; {
      console.log(error.message);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Jquery DataTable Plugin Js --&gt;
  &lt;script src="plugins/jquery-datatable/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script src="plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="js/pages/tables/jquery-datatable.js"&gt;&lt;/script&gt;
  
  &lt;div class="table-responsive"&gt;
    &lt;table id="tabel_CoverTrans_details" class="table table-bordered table-striped table-hover js-basic-example dataTable"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Date &amp; Time&lt;/th&gt;
          &lt;th&gt;Receipt No&lt;/th&gt;
          &lt;th&gt;Rec/Iss&lt;/th&gt;
          &lt;th&gt;Open Stock&lt;/th&gt;
          &lt;th&gt;Total Qty&lt;/th&gt;
          &lt;th&gt;Closing Stock&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="coverTrans_fields"&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>