如何根据 datatable angular 中的 JSON 动态填充 table 值？

Question

我正在使用 Angular-Datatables。我需要能够根据返回的数据动态创建 table。换句话说，我不想指定列 headers.

示例：

json数据：

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

第 Headers 列：

身份证、城市、州

有人可以帮忙吗？

Answer 1

下面的代码会根据数据table动态地给你

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 2

这真是个好问题！对于传统的 jQuery 数据表，这不是问题，但我们对 angular 数据表有不同类型的声明性设置，这使得分离各种任务变得更加困难。我们可以用 fromFnPromise 延迟数据的填充，但不能阻止 dataTable 在我们需要它之前被实例化。我想我找到了一个可靠的解决方案：

首先，为避免即时初始化，请从标记中删除 datatable 指令并给 <table> 一个 id，即：

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

然后加载数据资源，构建dtColumns和dtOptions最后使用[=15注入datatable属性和$compile<table> =]：

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

这应该适用于任何 "array of objects" 资源
演示 -> http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview

注意：已清理示例 JSON，我想这是一个示例，并不意味着要使用尾随逗号。

Answer 3

面对同样的问题，我实际上找到了一个更容易实现且更简单（并且由于不使用 $compile 而更安全）的解决方案。

需要对 html 进行的唯一更改是添加 ng-if:

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

发生的事情是 angular 将延迟创建此节点，直到 columnsReady 有任何值。所以现在在你的代码中你可以获得你需要的数据，当你拥有它时，你可以将 columnsReady 设置为 true 并且 angular 将完成剩下的工作。

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

如何根据 datatable angular 中的 JSON 动态填充 table 值？

How to populate table values dynamically based on JSON in datatable angular?

javascript

jquery

angularjs

datatables

angular-datatables