I am using angular-datatables
v0.5.x and I would like to load a local JSON object. Based on my research I know that I have to use a promise. From my console.log
I can see that the deferred.promise
is populated with the json data. So I assume it is returned correctly to DTOptionsBuilder.fromFnPromise()
. However none of the data is displayed in the data table. Any help would be very appreciated!
HTML:
<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" class="row-border stripe compact hover">
</table>
AngularJS Controller:
var getTableData = function(jsonObj) {
console.log('get table data function');
var deferred = $q.defer();
deferred.resolve(jsonObj);
console.log(deferred.promise);
return deferred.promise;
};
$scope.dtOptions = DTOptionsBuilder.fromFnPromise(getTableData(jsonObj))
.withPaginationType('full_numbers');
$scope.dtColumns = [
DTColumnBuilder.newColumn('col1').withTitle('Column 1'),
DTColumnBuilder.newColumn('col2').withTitle('Column 2'),
DTColumnBuilder.newColumn('col3').withTitle('Column 3'),
DTColumnBuilder.newColumn('col4').withTitle('Column 4')
];
$scope.dtInstance = {};
The json object:
[{
"col1": "Column 1",
"col2": "Column 2",
"col3": "Column 3",
"col4": "Column 4"
}]