Necesito meter valores de una base de datos en una tabla Bootstrap del tipo DataTable.
Esta es mi tabla
<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>
Si os fijais, los datos <tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td>
<td>$320,800</td> </tr>
están metidos estéticamente, y la tabla funciona perfectamente
Ahora bien, tengo una funcion en js que me carga los valores de la base de datos a la tabla. Los valores que cargo se ven en el navegador, pero la tabla, NO LOS RECONOCE
Os lo muestro:
Lo que hago ahora es borrar lo de <tr><td>Tiger Nixon</......
y cargar mi función:
<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>
Y ejecuto y me sale que se ven pero que no lo reconoce: No data available in table
Por lo tanto, no puedo aplicar las funciones de dataTable de Bootstrap. Si pongo una letra en el buscador por ejemplo, desaparece todo el contenido
Necesitaría un código que me pasara de mi función a tabla y que reconociera los datos.