Wie können Tabellenwerte basierend auf JSON in Datatable angular dynamisch gefüllt werden?

Question

Ich benutze . Ich muss in der Lage sein, die Tabelle basierend auf den Daten, die zurückgegeben werden, dynamisch zu erstellen. Mit anderen Worten, ich möchte die Spaltenüberschriften nicht angeben.

Beispiel:

json Daten:

[ 
{ 
    "id": "2", 
    "city": "Baltimore", 
    "state": "MD", 
}, 
{ 
    "id": "5", 
    "city": "Boston", 
    "state": "MA", 
}, 
{ 
    "id": "8", 
    "city": "Malvern", 
    "state": "PA", 
}, 
] 

Spaltenüberschriften:

id, Stadt, Staat

Kann jemand bitte helfen mit diesem?

Answer 1

, die eigentlich eine gute Frage! Mit herkömmlichen jQuery-Datentabellen ist dies kein Problem, aber wir haben eine andere Art von deklarativem Setup mit eckigen Datentabellen, was die Trennung der verschiedenen Aufgaben erschwert. Wir können die Datenpopulation mit fromFnPromise verzögern, verhindern jedoch nicht, dass die Datentabelle vor ihrer Verwendung instanziiert wird. Ich glaube, ich habe eine feste Lösung gefunden:

Zuerst zu vermeiden sofortige Initialisierung die datatable Richtlinie aus dem Markup entfernen und gibt die <table> ein id statt, das heißt:

<table id="example" dt-options="dtOptions" dt-columns="dtColumns" /> 

dann die Datenressource laden, bauen dtColumns und dtOptions injiziert und schließlich das datatable Attribut und die $compile<table> mit dem id:

$http({ 
    url: 'data.json' 
}).success(function(data) { 
    var sample = data[0], dtColumns = [] 

    //create columns based on first row in dataset 
    for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key) 
) 
    $scope.dtColumns = dtColumns 

    //create options 
    $scope.dtOptions = DTOptionsBuilder.newOptions() 
    .withOption('data', data) 
    .withOption('dataSrc', '') 

    //initialize the dataTable 
    angular.element('#example').attr('datatable', '') 
    $compile(angular.element('#example'))($scope) 
}) 

Dies sollte mit jedem „Array von Objekten“ arbeiten Ressource
Demo ->http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview

---

NB: gereinigt Haben Sie das Beispiel JSON, ich denke, es war eine Probe, und nicht dazu gedacht, zu arbeiten, mit abschließenden Kommas.

Answer 2

Below, den Sie Tabelle dynamisch auf Daten beruhen, geben

HTML

<div ng-controller="WithAjaxCtrl as showCase"> 
<table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table> 

JS

angular.module('showcase.withAjax',['datatables']).controller('WithAjaxCtrl', WithAjaxCtrl); 

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) { 
var vm = this; 
vm.dtOptions = DTOptionsBuilder.fromSource('data.json') 
    .withPaginationType('full_numbers'); 
vm.dtColumns = [ 
    DTColumnBuilder.newColumn('id').withTitle('ID'), 
    DTColumnBuilder.newColumn('city').withTitle('City'), 
    DTColumnBuilder.newColumn('state').withTitle('State') 
]; 

}

data.json

[{ 
"id": 860, 
"city": "Superman", 
"state": "Yoda" 
}, { 
"id": 870, 
"city": "Foo", 
"state": "Whateveryournameis" 
}, { 
"id": 590, 
"city": "Toto", 
"state": "Titi" 
}, { 
"id": 803, 
"city": "Luke", 
"state": "Kyle" 
}, 
... 
] 

Answer 3

Mit dem gleichen Problem konfrontiert, fand ich tatsächlich eine einfacher zu implementieren und viel einfacher (und sicherer, weil nicht mit $ kompilieren) Lösung.

Die einzige Änderung in den HTML gemacht werden benötigt wird, ist die Zugabe eines ng-if:

<table ng-if="columnsReady" datatable="" dt-options="dtOptions" dt-columns="dtColumns"/> 

Was passiert, ist, dass Winkel wird die Schaffung dieses Knotens bis columnsReady hat einen Wert verzögern. So jetzt in Ihrem Code können Sie die Daten erhalten, die Sie benötigen, und wenn Sie es haben, können Sie einfach columnsReady auf true setzen und Winkel wird den Rest erledigen.

$http({ 
    url: 'data.json' 
}).success(function(data) { 
    var sample = data[0], dtColumns = [] 

    //create columns based on first row in dataset 
    for (var key in sample) dtColumns.push(
    DTColumnBuilder.newColumn(key).withTitle(key) 
) 
    $scope.dtColumns = dtColumns 

    //create options 
    $scope.dtOptions = DTOptionsBuilder.newOptions() 
    .withOption('data', data) 
    .withOption('dataSrc', '') 

    //initialize the dataTable 
    $scope.columnsReady = true; 
});