javascript - example - ¿Cómo rellenar los valores de la tabla de forma dinámica en base a JSON en datatable angular?

llenar datatable con json

Question

Estoy usando Angular-Datatables . Necesito ser capaz de crear dinámicamente la tabla en función de los datos que se devuelven. En otras palabras, no quiero especificar los encabezados de columna.

Ejemplo:

datos json:

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

Encabezados de columna:

id, ciudad, estado

¿Alguien me puede ayudar con esto por favor?

Answer 1

¡Esa es realmente una buena pregunta! Con las tablas de datos jQuery tradicionales no es un problema, pero tenemos un tipo diferente de configuración declarativa con tablas de datos angulares, por lo que es más difícil separar las diversas tareas. Podemos retrasar la población de datos con fromFnPromise , pero no evitar que la datatable se instancia antes de que lo deseemos. Creo que he encontrado una solución sólida:

En primer lugar, para evitar la inicialización instantánea, elimine la directiva de datatable de datos del marcado y en su lugar déle una <table> id <table> , es decir:

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

A continuación, cargue el recurso de datos, dtColumns y dtOptions y, finalmente, inyecte el atributo datatable y $compile la <table> con el 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)
})

Esto debería funcionar con cualquier recurso de "matriz de objetos"
Demostración -> http://plnkr.co/edit/YNjqpZI53asWBz5edD4f?p=preview

NB: he limpiado el ejemplo JSON, supongo que era una muestra y no está destinado a trabajar con comas finales.

Answer 2

A continuación el código que le dará tabla dinámicamente en base a los datos

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

Al enfrentar el mismo problema, en realidad encontré una solución más fácil de implementar y mucho más simple (y más segura porque no usé $ compile).

El único cambio necesario para html es la adición de un ng-if :

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

Lo que sucede es que angular retrasará la creación de este nodo hasta que columnsReady tenga algún valor. Entonces, ahora en su código puede obtener los datos que necesita, y cuando los tiene, puede simplemente configurar las columnsReady para ser true y angular hará el resto.

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