title: Why bootstrap dynamic table pagination is not working?
body: <p>I am working on the Bootstrap table pagination, but one thing i have found it's working well on static content but in dynamic content it's not at all working.</p>
  
  <p>Static Code</p>
  
  <pre><code>&lt;script&gt;
   $(document).ready(function() {
       $('#example').DataTable();
   });
  &lt;/script&gt;
  
  &lt;table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;USN&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Branch&lt;/th&gt;
              &lt;th&gt;Batch&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Tiger Nixon&lt;/td&gt;
              &lt;td&gt;System Architect&lt;/td&gt;
              &lt;td&gt;Edinburgh&lt;/td&gt;
              &lt;td&gt;61&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Garrett Winters&lt;/td&gt;
              &lt;td&gt;Accountant&lt;/td&gt;
              &lt;td&gt;Tokyo&lt;/td&gt;
              &lt;td&gt;63&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Dynamic Table</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function() {
     $('#example').DataTable();
  });
  &lt;/script&gt;
  
  &lt;table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;USN&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Branch&lt;/th&gt;
              &lt;th&gt;Batch&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="user_list"&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
  var ref = firebase.database().ref("Students/");
  var newTable='';
  
  ref.on('child_added', function(snapshot) {
      snapshot.forEach(function(snap) {
  
          var usn = snap.val().usn;
          var name = snap.val().studentName;
          var colname = snap.val().collegeName;
          var branch = snap.val().branch;
          var batch = snap.val().batch;   
  
          newTable+='&lt;tr data-value='+usn+' id='+usn+'&gt;';
          newTable+='&lt;td&gt;'+usn+'&lt;/td&gt;';
          newTable+='&lt;td&gt;'+name+'&lt;/td&gt;';
          newTable+='&lt;td&gt;'+branch+'&lt;/td&gt;';
          newTable+='&lt;td&gt;'+batch+'&lt;/td&gt;';
          newTable+='&lt;/tr&gt;';
          document.getElementById('user_list').innerHTML=newTable;
      });
   });
  &lt;/script&gt;
  </code></pre>
  
  <p>So above of my code you can see in static content it's able to calculate row count but in dynamic content it's not able to calculate how many rows are there in the table as tables are created dynamically.</p>
  
  <p>Please kindly go through my above code and let me know if you have any solution for this.</p>
  
  <p>Thanks</p>