Put values in a bootstrap table and apply the bootstrap DataTable Functions to the added values

0

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.

    
asked by Vidal 02.12.2017 в 13:27
source

1 answer

0

Use the html property from data-url to request data at a remote site. I leave here the documentation

Bootstrap Table

    
answered by 02.12.2017 в 14:24