数据表行显示未定义,而不是我在firebase数据库中的数据,即使我试图将随机数据放在数据表HTML文件中,但它仍然显示未定义的
我的数据表我的数据也来自防火基地,你可以看到控制台
Firebase数据库
MIne HTML代码:
<body>
<table id="user_data" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>USN</th>
<th>Email</th>
<th>Name</th>
<th>Password</th>
</tr>
</thead>
<tbody id="table-body-pengguna">
<tr>
<td id="USN"></td>
<td id="email"></td>
<td id="name"></td>
<td id="password"></td>
</tr>
</tbody>
</table>
Mine JS代码:
firebase.initializeApp(firebaseConfig);
firebase.analytics();
$(document).ready(function() {
var table = $('#user_data').DataTable({
dom: 'Bfrtip',
orderCellsTop: true,
fixedHeader: true,
targets: -1,
className: 'dt-body-right',
hover: 1
});
});
firebase.database().ref('StudentID').get().then(function(snapshot) {
if (snapshot.exists()) {
console.log(snapshot.val());
USN = snapshot.val().UserUSN;
Email = snapshot.val().Useremail;
Name = snapshot.val().Username;
Password = snapshot.val().Userpassword;
document.getElementById("USN").innerHTML = USN;
document.getElementById("email").innerHTML = Email;
document.getElementById("name").innerHTML = Name;
document.getElementById("password").innerHTML = Password;
} else {
console.log(data.val());
}
})
.catch(function(error) {
console.log(error);
});
我找到了另一种将数据添加到数据表的方法
var table=$('#user_data'(.DataTable({"b过滤器":真的});
firebase.database().ref('StudentID').on('child_added', function(snapshot) {
var dataSet = [snapshot.val().UserUSN, snapshot.val().Useremail,
snapshot.val().Username, snapshot.val().Userpassword];
table.rows.add([dataSet]).draw();
});
});
Firebase Read Functions需要一个函数,该函数在引用中检测到子项时运行,然后运行从实时数据库检索数据的代码。
使用此代码:
firebase.database().ref('StudentID').on('child_added', (data) =>{
var USN = data.val().UserUSN;
var Email = data.val().Useremail;
var Name = data.val().Username;
var Password = data.val().Userpassword;
document.getElementById("USN").innerHTML = USN;
document.getElementById("email").innerHTML = Email;
document.getElementById("name").innerHTML = Name;
document.getElementById("password").innerHTML = Password;
})