代码之家 › 专栏 › 技术社区 › Jagruti

Datatable不适用于Firebase

datatables firebase-realtime-database firebase javascript

0

Jagruti · 技术社区 · 7 年前

我试图在Datatable中的data中显示数据,并允许用户以所需格式下载。但它似乎不起作用,我的数据既不能显示也不能下载。这是我目前使用的代码。

document.addEventListener("DOMContentLoaded", function(event) {


    var dTable=$('#ex-table').DataTable({
        "bDestroy": true,
        dom: 'lfrtipB',
        buttons: [ 
                    {
                        extend: 'copyHtml5',
                        title: 'Records'
                    },
                    {
                        extend: 'csvHtml5',
                        title: 'Records'
                    },
                    {
                        extend: 'excelHtml5',
                        title: 'Records'
                    },
                    {
                        extend: 'pdfHtml5',
                        title: 'Records'
                    },
                    'print'
                ],
         lengthMenu: [[5, 20, 50, -1], [5, 20, 50, "All"]]

  });


});



var databaseRef = firebase.database().ref("users/");

var table = $('#ex-table').DataTable();

databaseRef.on("child_added", function(data) { 
   var storageObj = data.val();

   var dataSet = [storageObj.Department, storageObj.EmpId, storageObj.Name, storageObj.Position];

   table.rows.add([dataSet]).draw();

});

https://codepen.io/jagrutitiwari/pen/WYBWVy 对于我正在尝试的代码。我哪里做错了?

更新:

users 节点:

更新2

安全规则:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

更新3

如果我加上 dataSrc 到Datatable它可以工作,但我现在看不到Datatable中的导出按钮。

document.addEventListener("DOMContentLoaded", function(event) {


    var dTable=$('#ex-table').DataTable({
        "bDestroy": true,
        dom: 'lfrtipB',
        data: dataSrc,
        buttons: [ 
              {
                 extend: 'copyHtml5',
                 title: 'Records'
               },
               {
                 extend: 'csvHtml5',
                 title: 'Records'
               },
               {
                  extend: 'excelHtml5',
                  title: 'Records'
               },
               {
                   extend: 'pdfHtml5',
                   title: 'Records'
               },
                   'print'
               ],
         lengthMenu: [[5, 20, 50, -1], [5, 20, 50, "All"]]

  });


});

1 回复 | 直到 7 年前

1

Renaud Tarnec 7 年前

根据您的安全规则,您的用户需要经过身份验证才能读取(和写入)数据库。

使用问题中显示的代码(我猜是整个HTML页面的摘录),您似乎没有要求用户进行身份验证,因此在查询数据库时不会得到任何记录。

您应该集成身份验证机制,例如使用FirebaseUI身份验证(请参阅 https://github.com/firebase/firebaseui-web ),或者,如果您的数据库正在测试中,请尝试使用“公共”规则,如:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}