JSONの動的コンテンツを持つデータ型でテーブルの機能が失われる

Question

現在、JSONオブジェクトから取得したコンテンツのテーブルを動的に埋めようとしています。ここで

がテーブルである：私は、このようなソートなど、検索オプション、フィルタ、PDFとしてエクスポートする、として、テーブル内の複数の興味深い機能を持っている

<table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%"> 
    <thead> 
    <tr> 
     <th data-hide="phone">ID</th> 
     <th data-class="expand">Nom</th> 
     <th data-hide="phone">Commentaires</th> 
     <th data-hide="phone,tablet">Date</th> 
     <th data-hide="phone,tablet">Attachements</th> 
     <th data-hide="phone,tablet">Actions</th> 
    </tr> 
    </thead> 
    <tbody id="table"> 
    </tbody> 
</table> 

、....これらの機能が正常に動作しています私のような静的なコンテンツを含むだ場合：

<tr> 
    <td>33</td> 
    <td>Bevis</td> 
    <td>1-955-717-0835</td> 
    <td>Est Ac Inc.</td> 
    <td>7424</td> 
    <td>Ichtegem</td> 
</tr> 

しかし、すぐに私は私のJSONオブジェクトからデータテーブルの内容を取得するよう、私はもうそれらの機能を使用することはできないんだけど、ソート動作しません、検索どちらもありません。

ここではJavaScript私が使用している次のとおりです。

$(document).ready(function() { 
    $.get('getAllDocuments', function(responseJson) { 
    if (responseJson != null) { 
     var table1 = $("#table"); 
     $.each(responseJson, function(key, value) { 
     var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>"); 
     rowNew.children().eq(0).text(value['id']); 
     rowNew.children().eq(1).text(value['nom']); 
     rowNew.children().eq(2).text(value['commentaire']); 
     rowNew.children().eq(3).text(value['date']); 
     rowNew.children().eq(4).text(value['id']); 
     rowNew.children().eq(5).html("<a href=\"displayDocument?id=" + value['id'] + "\">Voir</a>&nbsp;&nbsp;&nbsp;<a href=\"deleteDocumentFromId?id=" + value['id'] + "\">Supprimer</a>"); 
     rowNew.appendTo(table1); 
     }); 
    } 
    }); 
}); 

私のテーブルが正しく満たされている、すべてではない機能が関連付けられています。私のテーブルにJSONコンテンツを適切な方法で埋め込む方法についての考え方はありますか？

Answer 1

私はあなたのようなのDataTableのajaxオプションを使用することができると思う：

var table = $('#example').DataTable({ 
    ajax: 'data.json' 
}); 

P.S. hereは文書です