The DTInstance API has a rerender() method that will call the renderer to re-render the table again.
This is not the same as DataTable's draw(); API .
It will completely remove the table, then it will re-render the table, resending the request to the server if necessarily.
Rerender
ID
First name
Last name
1
Foo
Bar
123
Someone
Youknow
987
Iamout
Ofinspiration
Rerender
ID
First name
Last name
1
Foo
Bar
123
Someone
Youknow
987
Iamout
Ofinspiration
angular.module('showcase.rerender', ['datatables', 'ngResource']).controller('RerenderDefaultRendererCtrl', RerenderDefaultRendererCtrl);
function RerenderDefaultRendererCtrl(DTOptionsBuilder, DTColumnDefBuilder, DTInstances) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions();
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
DTInstances.getLast().then(function (dtInstance) {
vm.dtInstance = dtInstance;
});
}
angular.module('showcase.rerender', ['datatables', 'ngResource']).controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl);
function RerenderAjaxRendererCtrl(DTOptionsBuilder, DTColumnBuilder, DTInstances) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('data.json');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()
];
DTInstances.getLast().then(function (dtInstance) {
vm.dtInstance = dtInstance;
});
}
angular.module('showcase.rerender', ['datatables', 'ngResource']).controller('RerenderPromiseRendererCtrl', RerenderPromiseRendererCtrl);
function RerenderPromiseRendererCtrl($resource, DTOptionsBuilder, DTColumnBuilder, DTInstances) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
return $resource('data.json').query().$promise;
});
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable()
];
DTInstances.getLast().then(function (dtInstance) {
vm.dtInstance = dtInstance;
});
}
Rerender
ID
FirstName
LastName
{{ person.id }}
{{ person.firstName }}
{{ person.lastName }}
Rerender
ID
FirstName
LastName
{{ person.id }}
{{ person.firstName }}
{{ person.lastName }}
angular.module('showcase.rerender', ['datatables', 'ngResource']).controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl);
function RerenderNGRendererCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder, DTInstances) {
var vm = this;
vm.persons = [];
vm.dtOptions = DTOptionsBuilder.newOptions();
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible(),
DTColumnDefBuilder.newColumnDef(2).notSortable()
];
$resource('data.json').query().$promise.then(function(persons) {
vm.persons = persons;
});
DTInstances.getLast().then(function (dtInstance) {
vm.dtInstance = dtInstance;
});
}