Я использую Angular-Datatables. Мне нужно иметь возможность динамически создавать таблицу на основе возвращаемых данных. Другими словами, я не хочу указывать заголовки столбцов.
Пример:
json-данные:
[
{
"id": "2",
"city": "Baltimore",
"state": "MD",
},
{
"id": "5",
"city": "Boston",
"state": "MA",
},
{
"id": "8",
"city": "Malvern",
"state": "PA",
},
]
Заголовки столбцов:
id, город, штат
Может ли кто-нибудь помочь с этим?
На самом деле это хороший вопрос! С традиционными таблицами данных jQuery это не проблема, но у нас есть другой тип декларативной настройки с угловыми таблицами данных, что затрудняет разделение различных задач. Мы можем отложить заполнение данными с помощью fromFnPromise, но не предотвратить создание экземпляра dataTable до того, как мы этого захотим. Я думаю, что нашел твердое решение:
Во-первых, чтобы избежать мгновенной инициализации, удалите директиву datatable из разметки и вместо нее дайте <table> id, т.е.:
<table id="example" dt-options="dtOptions" dt-columns="dtColumns" />
Затем загрузите ресурс данных, создайте dtColumns и dtOptions и, наконец, добавьте атрибут datatable и $compile <table> с помощью 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)
})
Это должно работать с любым ресурсом "массива объектов"
Demo -> http://plnkr.co/edit/TzBaaZ2Msd9WchfLDLkN?p=preview
NB: очистил пример 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;
});
Ниже код, который даст вам таблицу динамически на основе данных
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"
},
...
]
