Datatables mit JSON dynamischem Inhalt, verlieren Tabellenfunktionen

Question

Ich versuche gerade, eine Tabelle dynamisch mit Inhalten zu füllen, die von einem JSON-Objekt abgerufen werden.

Hier ist die Tabelle:

<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> 

ich mehrere interessante Features in der Tabelle wie eine Suchoption haben, einen Filter, sortieren, Export als PDF, etc .... diese Funktionen einwandfrei funktionieren wenn ich mit statischen Inhalten wie:

<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> 

aber sobald ich Datentabelle Inhalt von Mein JSON-Objekt abzurufen, ich bin nicht mehr in der Lage, diese Funktionen zu benutzen, ist Art nicht funktioniert, suchen weder .

Hier ist die JavaScript Ich verwende:

$(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); 
     }); 
    } 
    }); 
}); 

Mein Tisch richtig gefüllt ist, aber nicht alle Funktionen zugeordnet sind. Irgendeine Idee, wie ich meinen Tisch mit JSON-Inhalten richtig füllen kann?

Answer 1

ich glaube, Sie ajax Möglichkeit Tables wie zu verwenden:

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

P. S. here ist die Dokumentation