更新 Firebase 数据库时数据表在表中添加空白行

Question

我想停止在 firebase 中自动刷新数据。 我不想自动刷新它们。 我正在使用 dataTable 来显示来自 Firebase 数据库的数据。 但是随着 Firebase 数据库的更新，dataTable 会在 Firebase dtabse 更新时显示额外的空白行。

我还在下面附上了屏幕短裤。 Screen 1 Before Database Update

After Databse Update It will Shows balnks Rows

 $(document).ready(function() {
         table = $('#example').DataTable( {
            "columnDefs": [ {
                "targets": -1,
                "data": null,
                "defaultContent": "<button type='button' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white'>Delete User</button>"

            } ],
            dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ],
        } );

        $('#example tbody').on( 'click', 'button', function () {
            var data = table.row( $(this).parents('tr') ).data();
           firebase.database().ref().child('mobilereg/' +  data[1]).remove();
           firebase.database().ref().child('limited_acces_devices/' +data[1]).remove();
           firebase.database().ref().child('full_acces_devices/' + data[1]).remove();
                     window.location.reload();
        } );
     });

     var ref = firebase.database().ref("mobilereg/");
 var i=0;
   ref.on("value", function(snapshot) {
     var arr = snapshot.val();
 var arr2 = Object.keys(arr);

   snapshot.forEach(function (childSnapshot) {
         var value = childSnapshot.val();
         var key = arr2[i];

         var dataSet = [i+1, arr2[i],value.screen];
        table.rows.add([dataSet]).draw();
        i++;
     });
   }, function (error) {
      console.log("Error: " + error.code);
   });

Answer 1

要只加载一次数据，请使用once() 而不是on()：

ref.once("value", function(snapshot) {

但实时更新是使用 Firebase 的主要好处之一，因此我建议找出空白行的实际原因是什么，而不是禁用实时更新。

一个简单的方法是在添加新项目之前清除table.rows（所以就在snapshot.forEach之前）。

更有效的方法是监听各种child_事件，然后更新表中新的子节点、删除的子节点和更改的子节点。