0

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

introducir la descripción de la imagen aquí

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.

1 respuesta 1

0

Usa desde el html la propiedad data-url para hacer request de datos en un sitio remoto. te dejo aqui la documentación

Bootstrap Table

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.