Datatables検索、フィルタリング、およびFirebaseを使用したエクスポート

Question

私は、角度から動くCRUDアプリを持っています。最近、データテーブルの力を使ってカラムを検索、フィルタリング、ソート、エクスポート、非表示にするために、データテーブルを追加しました。残念なことに、検索のようなデータテーブル機能を使用するとFirebaseの参照がフィールドの代わりに返されます。{{contact.name}}{{contact.email}}（さらに4つの列があります）。これを修正する方法はありますか？ 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> 
 
\t <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>

EDIT

は、Ajaxのソートを経由して、このデータをアウトソーシングます。これは私がAjaxのGETリクエスト

{"-KIZ6VnucsKbKjlaE8aq":{"area":"Parklands","email":"tttt","name":"Mohammed Sohail","phone":"+254711777734","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"}}

から取得し、JSON形式であり、データがコンソール上どのように見えるか、これはです。

データテーブルを使用するための助けがあれば、どんな助けもあります。

FireBase database image

Answer 1

ので、この質問は本当にのDataTableとng-repeatと一緒に使用することができ、より平易な構造になKId6Rqo0B6w0jACHhWMなど未知のオブジェクトのエントリ名を持つオブジェクトの（firebase）JSONオブジェクトを回す程度ですか？

$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データ）のDataTableのために理解しやすいです：

あなたはプレーンなオブジェクトの配列には、この方法をcontactsをフォーマットすることができます。 - >http://plnkr.co/edit/tn9cuKa46vs4x8cHebjB?p=preview