Load/Reload the table data from a promise function
In some case, you need to load some new data.
-
If you need to load new data, you just have to call the
dtInstance.changeData(fnPromise);
, where fnPromise
is a promise or a function that returns a promise.
-
If you need to reload the data, you just have to call the function dtInstance.reloadData();
.
To use this functionality, you must provide a function that returns a promise. Just a promise is not enough.
angular.module('showcase.dataReload.withPromise', ['datatables', 'ngResource'])
.controller('DataReloadWithPromiseCtrl', DataReloadWithPromiseCtrl);
function DataReloadWithPromiseCtrl(DTOptionsBuilder, DTColumnBuilder, $resource) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
return $resource('data.json').query().$promise;
}).withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
vm.newPromise = newPromise;
vm.reloadData = reloadData;
vm.dtInstance = {};
function newPromise() {
return $resource('data1.json').query().$promise;
}
function reloadData() {
var resetPaging = true;
vm.dtInstance.reloadData(callback, resetPaging);
}
function callback(json) {
console.log(json);
}
}
data.json
data1.json
[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
},
...
]