Re-render a table

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.

ID First name Last name
1 Foo Bar
123 Someone Youknow
987 Iamout Ofinspiration

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) { var vm = this; vm.dtOptions = DTOptionsBuilder.newOptions(); vm.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1).notVisible(), DTColumnDefBuilder.newColumnDef(2).notSortable() ]; vm.dtInstance = {}; }

angular.module('showcase.rerender', ['datatables', 'ngResource']).controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl); function RerenderAjaxRendererCtrl(DTOptionsBuilder, DTColumnBuilder) { 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() ]; vm.dtInstance = {}; }

angular.module('showcase.rerender', ['datatables', 'ngResource']).controller('RerenderPromiseRendererCtrl', RerenderPromiseRendererCtrl); function RerenderPromiseRendererCtrl($resource, DTOptionsBuilder, DTColumnBuilder) { 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() ]; vm.dtInstance = {}; }

ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}

ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}
angular.module('showcase.rerender', ['datatables', 'ngResource']).controller('RerenderAjaxRendererCtrl', RerenderAjaxRendererCtrl); function RerenderNGRendererCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) { var vm = this; vm.persons = []; vm.dtOptions = DTOptionsBuilder.newOptions(); vm.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1).notVisible(), DTColumnDefBuilder.newColumnDef(2).notSortable() ]; vm.dtInstance = {}; $resource('data.json').query().$promise.then(function(persons) { vm.persons = persons; }); }