如何根据数据表角度中的JSON动态填充表值？

I'm using Angular-Datatables. I need to be able to dynamically create the table based on the data that is being returned. In other words, I do not want to specify the column headers.

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

Example:

json data:

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

Column Headers:

id, city, state

id,城市,州

Can someone please help with this?

有人可以帮忙吗?

3 个解决方案

#1

That is actually a good question! With traditional jQuery dataTables it is not a problem, but we have a different kind of declarative setup with angular dataTables, making it more difficult to separate the various tasks. We can delay the population of data with fromFnPromise, but not prevent the dataTable from being instantiated before we want it. I think I have found a solid solution :

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

First, to avoid instant initialization remove the datatable directive from the markup and give the <table> an id instead, i.e :

首先,为了避免即时初始化,请从标记中删除datatable指令,并为

指定一个id,即:

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

Then load the data resource, build dtColumns and dtOptions and finally inject the datatable attribute and $compile the <table> using the id :

然后加载数据资源,构建dtColumns和dtOptions,最后注入datatable属性,并使用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)
})

This should work with any "array of objects" resource
Demo -> http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview

这应该适用于任何“对象数组”资源演示 - > http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview

NB: Have cleaned up the example JSON, I guess it was a sample and not meant to be working with trailing commas.

注意:已经清理了示例JSON,我想这是一个示例,并不打算使用尾随逗号。

#2

Being faced with the same problem, I actually found an easier to implement and much simpler (and safer because of not using $compile) solution.

面对同样的问题,我实际上发现更容易实现,更简单(并且因为不使用$ compile而更安全)解决方案。

The only change needed to be made to the html is the addition of an ng-if:

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

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

What happens is that angular will delay the creation of this node till columnsReady has any value. So now in your code you can get the data you need, and when you have it, you can just set columnsReady to true and angular will do the rest.

会发生什么是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;
});

#3

-2

Below code which will give you table dynamically based on data

下面的代码将根据数据动态地为您提供表格

HTML

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

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"
 },
 ...
 ]

#1