如何根据 datatable angular 中的 JSON 动态填充 table 值?
How to populate table values dynamically based on JSON in datatable angular?
我正在使用 Angular-Datatables。我需要能够根据返回的数据动态创建 table。换句话说,我不想指定列 headers.
示例:
json数据:
[
{
"id": "2",
"city": "Baltimore",
"state": "MD",
},
{
"id": "5",
"city": "Boston",
"state": "MA",
},
{
"id": "8",
"city": "Malvern",
"state": "PA",
},
]
第 Headers 列:
身份证、城市、州
有人可以帮忙吗?
下面的代码会根据数据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"
},
...
]
这真是个好问题!对于传统的 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,我想这是一个示例,并不意味着要使用尾随逗号。
面对同样的问题,我实际上找到了一个更容易实现且更简单(并且由于不使用 $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;
});
我正在使用 Angular-Datatables。我需要能够根据返回的数据动态创建 table。换句话说,我不想指定列 headers.
示例:
json数据:
[
{
"id": "2",
"city": "Baltimore",
"state": "MD",
},
{
"id": "5",
"city": "Boston",
"state": "MA",
},
{
"id": "8",
"city": "Malvern",
"state": "PA",
},
]
第 Headers 列:
身份证、城市、州
有人可以帮忙吗?
下面的代码会根据数据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"
},
...
]
这真是个好问题!对于传统的 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,我想这是一个示例,并不意味着要使用尾随逗号。
面对同样的问题,我实际上找到了一个更容易实现且更简单(并且由于不使用 $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;
});