Question

我需要知道如何将数据从数据库添加到DataTable-Bootstrap

这是我的表：

<div class="container">
<button id="addRow">Add new row</button>
 <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>

        </tr>
    </thead> 
</table>
</div>

我有一个脚本，可以自动将数据从数据库添加到DataTable-Bootstrap

<script>
var tblusuario = document.getElementById('example');
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;


    });
});

但桌子不能识别它，我不能使用DataTable的功能

See the table

在此之后，我已经学习了3天来更改代码以将其放在表格中

我已经接受了这个参考（它是okey）

   <button id="addRow">Add new row</button>
   <script>

   $(document).ready(function() {
   var t = $('#example').DataTable();
   var counter = 1;

   $('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',

    ] ).draw( false );

       counter++;
   } );

   // Automatically add a first row of data
   $('#addRow').click();
    } );

到目前为止，我想重构我的代码，以便为dataTable提供功能

我有这个，但它不起作用：（

<script>


$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
var databaseRef = firebase.database().ref('Usuarios/');
var rowindex = 1;
 databaseRef.once('value', function(snapshot) {
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();

var addhere = childKey;
var b = childData.usuario;

            });
    });

  $('#addRow').on( 'click', function () {

    t.row.add( [
        addhere,//PROBLEM
        'hola',
        '.3',
    ] ).draw( false );


   } );

  // Automatically add a first row of data
  $('#addRow').click();
 } );

有人可以帮我处理代码吗？感谢

Answer 1

通过查看您的代码，您似乎正在使用Firebase JavaScript client SDK。因此，您可以做的是从firebase检索数据，然后将其注入DataTables。

databaseRef.once('value', function(snapshot) {
  $('#example').DataTable({
    data : snapshot.val()  
  });
});

您需要记住一件事，即firebase发送的数据应该与DataTables Data source types 一起使用，否则您必须使用columns.data或columns.render来修改收到的数据。

将数据添加到DataTable-Bootstrap

1 个答案: