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

Solution 1:

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 codedocument.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!

Share