我有以下控制器,用于填充DataTable表。
但是我使用了json数组,我想使用一个返回json对象的web服务。 http://localhost:8080/system/public/ws/users
。它返回一个nose对象数组,因为我在该函数中使用它来填充表格。
> .controller('dt_default',
function($compile, $scope, $timeout, $resource, DTOptionsBuilder, DTColumnDefBuilder, $http) {
var vm = this;
vm.dt_data = [];
vm.dtOptions = DTOptionsBuilder
.newOptions()
.withDisplayLength(10)
.withOption('initComplete', function() {
$timeout(function() {
$compile($('.dt-uikit .md-input'))($scope);
})
});
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2),
DTColumnDefBuilder.newColumnDef(3),
DTColumnDefBuilder.newColumnDef(4),
DTColumnDefBuilder.newColumnDef(5)
];
$resource('data/dt_data.json')
/* Here I get the json.
* How can I use the webservice that returns an array of objects.
* Json with has only arrays
*/
.query()
.$promise
.then(function(dt_data) {
vm.dt_data = dt_data;
console.log(dt_data);
});
这个html我就是这样的,就像我一样。
<tr ng-repeat="row in showCase.dt_data">
<td>{{row[0]}}</td>
<td>{{row[1]}}</td>
<td>{{row[2]}}</td>
<td>{{row[3]}}</td>
<td>{{row[4]}}</td>
<td>
<a href="#" data-uk-modal="{target:'#modal_header_footer'}"><i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>
<a href="#" data-uk-modal="{target:'#modal_header_footer_eliminar'}"><i class="md-icon material-icons md-bg-red-900 uk-text-contrast"></i></a>
</td>
</tr>
答案 0 :(得分:0)
使用此代码:
请看这个页面:Documentation
.controller('dt_default',
function($compile, $scope, $timeout, $resource, DTOptionsBuilder, DTColumnDefBuilder, $http) {
var vm = this;
vm.dt_data = [];
vm.dtOptions = DTOptionsBuilder
.newOptions()
.withDisplayLength(10)
.withOption('initComplete', function() {
$timeout(function() {
$compile($('.dt-uikit .md-input'))($scope);
})
})
.withOption('ajax', {
url: 'http://localhost:8080/system/public/ws/users',
type: 'GET',
})
.withOption('processing', true)
.withOption('serverSide', true);
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name'),
DTColumnBuilder.newColumn(null).withTitle('Option').renderWith(data, type, full) {
var el = '<a href="#" data-uk-modal="{target:\'#modal_header_footer\'}"><i class="md-icon material-icons md-bg-light-blue-900 uk-text-contrast"></i></a>';
})
];
&#13;
<div ng-controller="dt_default as dt_default">
<table datatable="" dt-options="dt_default.dtOptions" dt-columns="dt_default.dtColumns" class="row-border hover"></table>
</div>
&#13;