My Chat My Chat - 1 month ago 16
Javascript Question

Why bootstrap dynamic table pagination is not working?

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.

Static Code

<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>USN</th>
<th>Name</th>
<th>Branch</th>
<th>Batch</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
</tbody>
</table>


Dynamic Table

<script>
$(document).ready(function() {
$('#example').DataTable();
});
</script>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>USN</th>
<th>Name</th>
<th>Branch</th>
<th>Batch</th>
</tr>
</thead>
<tbody id="user_list">
</tbody>
</table>

<script>
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+='<tr data-value='+usn+' id='+usn+'>';
newTable+='<td>'+usn+'</td>';
newTable+='<td>'+name+'</td>';
newTable+='<td>'+branch+'</td>';
newTable+='<td>'+batch+'</td>';
newTable+='</tr>';
document.getElementById('user_list').innerHTML=newTable;
});
});
</script>


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.

Please kindly go through my above code and let me know if you have any solution for this.

Thanks

Answer

Your code is not working because you invoke the initialisation object (with $('#example').DataTable();) in the moment the document is ready, before the data is generated.

You have (at least) two options:

  1. Call $('#example').DataTable(); after you generate the dynamic data.
    Something like:

    ref.on('child_added', function(snapshot) {
        snapshot.forEach(function(snap) {
            var usn = snap.val().usn;
            // more code
            document.getElementById('user_list').innerHTML=newTable;
            $('#example').DataTable();
        });
    });
    
  2. You use your snapshot function to generate not the table but a data set. Then, use the built-in data option in the initialisation object, passing in the data set.

    var dataSet = [
        [ "Tiger Nixon", "System Architect", "Edinburgh", "61" ],
        [ "Garrett Winters", "Accountant", "Tokyo", "63" ]
    ];
    
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "USN" }
        ]
    } );
    

Here you will find the documentation for the second option.

Hope it helps!

Comments