2017-12-02 138 views
0

我需要知道如何從數據庫將數據添加到數據表,引導將數據添加到數據表,引導

這是我的表:

<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> 

我有一個腳本,從我的數據庫中的數據添加自動數據表的自舉

<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; 


    }); 
}); 

乙UT表不承認它,我不能使用使用DataTable中

See the table

的功能在此之後,我已經3天學習更改代碼把它放在桌子

我已經把這個參考(那有什麼?)

<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(); 
    }); 

到目前爲止,我想重構米而Y碼爲了funtion到dataTable的

我有這個,但它doesn't工作:(

<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(); 
}); 

有人能幫助我的代碼? 謝謝

回答

0

通過看你的代碼似乎你使用Firebase JavaScript client SDK。因此,您可以從Firebase中檢索數據,然後將其注入DataTable。

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

你必須記住,這是由火力發送數據應與DataTables Data source types 背景下一件事情,否則你必須使用columns.datacolumns.render修改接收到的數據。

+0

非常感謝。我想沒有人會回答我了。現在我可以看到表格中的Firebase數據。現在我想在每一行的右邊放一個按鈕來消除孩子。有任何想法嗎? – Vidal

+0

@Vidal檢查[爲某列生成的內容](https://datatables.net/examples/ajax/null_data_source.html) –