使用 Firebase 搜索、过滤和导出数据表

Question

我有一个由 angular 提供支持的 CRUD 应用程序。最近我向其中添加了数据表，以便使用数据表的强大功能搜索、过滤、排序、导出和隐藏列。不幸的是，当我使用任何数据表功能（例如搜索）时，它 returns 各个列中的 Firebase 引用 {{contact.name}} {{contact.email}} （还有 4 列） returns Firebase 引用的一个字段。有没有办法来解决这个问题？我真的需要那些数据表功能，同时使用 Firebase。

$(document).ready(function() {
    $('#contacts').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ]
    } );
} );

<table id="contacts" class="table table-striped table-hover" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>Area</th>
      <th>Occupation</th>
      <th>E-mail</th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="contact in contacts">
      <td>{{contact.name}}</td>
      <td>{{contact.phone}}</td>
      <td>{{contact.area}}</td>
      <td>{{contact.work}}</td>
      <td>{{contact.email}}</td>
      <td><a href="#/edit/{{contact.$id}}" class="btn btn-raised btn-xs btn-warning">Edit</a> <a class="btn btn-raised btn-xs btn-danger" ng-click="removeContact(contact.$id)">Delete</a></td>

    </tr>
  </tbody>
</table>

编辑

将通过 ajax 获取数据来解决这个问题。这是我从 ajax GET 请求

得到的 json 格式

{"-KIZ6VnucsKbKjlaE8aq":{"area":"Parklands","email":"tttt","name":"Mohammed Sohail","phone":"+254700000000","work":"ttt"},"-KId6OC2gOwiacUid9yK":{"area":"dfgdfg","email":"dfgdf","name":"dfg","phone":"dfgdfg","work":"fdfffffff"},"-KId6Rqo0B6w0jACHhWM":{"area":"dfgdfgdfgdf","email":"dfgdfgdfgdfg","name":"dfgfdgdf","phone":"gdfgdfgdfg","work":"gdfgdfgdfgdfg"},"-KIqmYZubPYhAqDqEyWo":{"area":"dfgfdg","email":"fgfdgfdgdf","name":"fgfg","phone":"fdgdg","work":"fgdfgdf"},"-KIqn5QABMXrTGoVgQv1":{"area":"bla","email":"weadasda","name":"bla","phone":"bla","work":"bla"}}

这就是数据在控制台上的样子。

任何使用数据表的帮助都将得到应用。

FireBase database image

Answer 1

所以，这个问题实际上是关于将具有未知对象条目名称（例如 KId6Rqo0B6w0jACHhWM）的对象的 (firebase) JSON 对象转换为更简单的结构，可以与数据表和 ng-repeat？

您可以这样将 contacts 格式化为普通对象数组：

$http.get('firebase.json').then(function(json) { //faked response from firebase
  $scope.contacts = []
  for (var item in json.data) {
    $scope.contacts.push(json.data[item]) 
  }
})

现在 ng-repeat 可以工作并且标记（或 contacts 数据）对于数据表来说是可以理解的。要将其转换为 angular-datatables（jQuery 数据表的 angular 指令），您唯一需要做的就是包含 datatables 依赖项并包含 datatable 指令在标记中：

<table datatable="ng" class="table table-striped table-hover" >

演示 -> http://plnkr.co/edit/tn9cuKa46vs4x8cHebjB?p=preview

使用 Firebase 搜索、过滤和导出数据表

Datatables search, filter, and export with Firebase

json

datatables

angularjs

firebase

angularfire