I need to put values from a database into a Bootstrap table of type DataTable .
This is my table
<div class="container">
<h3>Lista de Usuários</h3>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<td><b>Índice<b></td>
<td><b>#ID del usuario<b></td>
<td><b>Nombre<b></td>
</tr>
</thead>
<tbody id="aqui">
<tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td>
</tr>
<tr><td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td>
</tr>
</tbody>
</table>
</div>
If you notice, the data <tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td>
<td>$320,800</td> </tr>
are aesthetically inserted, and the table works perfectly
Now, I have a function in js that loads the values from the database to the table. The values that I see in the browser , but the table, DO NOT RECOGNIZE
I show you:
What I do now is delete the <tr><td>Tiger Nixon</......
and load my function:
<script>
var tblusuario = document.getElementById('aqui');
var databaseRef = firebase.database().ref('Usuarios/');
//var databaseRef = FirebaseFirestore.database().ref('/users');
var rowindex = 1;
databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblusuario.insertRow(rowindex);
var cellIndice= row.insertCell(0);
var cellId = row.insertCell(1);
var cellNombre = row.insertCell(2);
cellIndice.innerHTML=rowindex;
cellId.appendChild(document.createTextNode(childKey));
cellNombre.appendChild(document.createTextNode(childData.usuario));
rowindex = rowindex + 1;
});
});
</script>
And I run and I see that they look but do not recognize it: No data available in table
Therefore, I can not apply the dataTable functions of Bootstrap. If I put a letter in the search engine for example, all the content disappears
I would need a code that would pass me from my function to a table and that would recognize the data.