如何使用JavaScript将Firebase实时数据库连接到DataTables？

我在项目中尝试使用DataTables插件搭配Firebase实时数据库，但编写的代码无法满足项目所需的效果与功能。

原代码 #

$(document).ready(function() {
   var dbref   = firebase.database().ref('passengers');
   dbref.on('child_added',function(snapshot) {
      var config = {
     apiKey: "",
     authDomain: "",
     databaseURL: "",
     projectId: "",
     storageBucket: "",
     messagingSenderId: "",
     appId: "",
     measurementId: ""
  };
  firebase.initializeApp(config);

  
       var table =  $('#dataTable1').DataTable( {
           destroy: true,    
           "iDisplayLength": 5,
           "aLengthMenu": [
               [5, 10, 25, 50, -1],
               [5, 10, 25, 50, "All"]]
       });
       var dataSet = [snapshot.val().time, snapshot.val().temp, snapshot.val().date];
       table.rows.add([dataSet]).draw();
   });
});

运行结果 #

问题点及修复方案 #

1. Firebase重复初始化 #

原代码在child_added事件触发时重复初始化Firebase，会抛出重复初始化的错误，且完全无必要。Firebase初始化只需执行一次，应放在事件监听逻辑之外。

2. DataTables重复创建表格 #

每次新增数据都销毁并重建表格，导致之前加载的数据被清空，最终表格仅显示最后一条数据（即截图呈现的情况）。正确做法是只初始化一次表格，后续仅向表格添加新行。

修复后的代码 #

$(document).ready(function() {
    // 初始化Firebase，仅执行一次
    var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
        measurementId: ""
    };
    firebase.initializeApp(config);

    // 初始化DataTables表格，仅执行一次
    var table = $('#dataTable1').DataTable({
        "iDisplayLength": 5,
        "aLengthMenu": [
            [5, 10, 25, 50, -1],
            [5, 10, 25, 50, "All"]
        ]
    });

    // 监听passengers节点的新增数据（含已有数据的初始加载）
    var dbref = firebase.database().ref('passengers');
    dbref.on('child_added', function(snapshot) {
        var passengerData = snapshot.val();
        var dataSet = [passengerData.time, passengerData.temp, passengerData.date];
        table.rows.add([dataSet]).draw();
    });
});

额外注意事项 #

• 确保HTML表格结构与数据列数对应，比如表格需包含3个表头<th>，分别对应时间、温度、日期。
• child_added事件会先遍历节点下所有已有数据，再监听后续新增数据，修复后的代码会自动加载所有历史数据并实时更新新数据。

内容的提问来源于stack exchange，提问作者leanTech Help