Load/Reload the table data from an Ajax source
This module also handles data reloading / loading from an Ajax source:
-
If you need to load data, you just have to override the
dtOptions.sAjaxSource
property.
-
If you need to reload the data, you just have to call the function
dtOptions.reloadData();
.
angular.module('datatablesSampleApp', ['datatables']).controller('DataReloadWithAjaxCtrl', DataReloadWithAjaxCtrl);
function DataReloadWithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json').withPaginationType('full_numbers');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
vm.reloadData = reloadData;
vm.changeData = changeData;
function reloadData() {
vm.dtOptions.reloadData();
}
function changeData() {
vm.dtOptions.sAjaxSource = 'data1.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"
},
...
]