# 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.

Choose a renderer:

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; }); }