Change DataTable options/columns/columnDef

You can change the DataTable options, columns or columnDefs seamlessly. All you need to do is to change the dtOptions, dtColumns or dtColumnDefs of your DataTable.

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.changeOptions', ['datatables', 'ngResource']).controller('ChangeOptionsDefaultRendererCtrl', ChangeOptionsDefaultRendererCtrl); function ChangeOptionsDefaultRendererCtrl(DTOptionsBuilder, DTColumnDefBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.newOptions() .withLanguageSource('//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/English.json'); vm.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1).notVisible(), DTColumnDefBuilder.newColumnDef(2).notSortable() ]; vm.changeOptions = changeOptions; vm.changeColumnDefs = changeColumnDefs; function changeOptions() { vm.dtOptions.withPaginationType('full_numbers') .withLanguageSource('//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/French.json') .withDisplayLength(2) .withDOM('pitrfl'); } function changeColumnDefs() { vm.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0).notVisible(), DTColumnDefBuilder.newColumnDef(1).notVisible(), DTColumnDefBuilder.newColumnDef(2).notSortable() ]; } }

angular.module('showcase.changeOptions', ['datatables', 'ngResource']).controller('ChangeOptionsAjaxRendererCtrl', ChangeOptionsAjaxRendererCtrl); function ChangeOptionsAjaxRendererCtrl(DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromSource('data.json') .withLanguageSource('//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/English.json'); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable() ]; vm.changeOptions = changeOptions; vm.changeColumns = changeColumns; function changeOptions() { vm.dtOptions.withPaginationType('full_numbers') .withLanguageSource('//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/French.json') .withDisplayLength(2) .withDOM('pitrfl'); } function changeColumns() { vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID').notVisible(), DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable() ]; } }

angular.module('showcase.changeOptions', ['datatables', 'ngResource']).controller('ChangeOptionsPromiseRendererCtrl', ChangeOptionsPromiseRendererCtrl); function ChangeOptionsPromiseRendererCtrl($resource, DTOptionsBuilder, DTColumnBuilder) { var vm = this; vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() { return $resource('data.json').query().$promise; }) .withLanguageSource('//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/English.json'); vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID'), DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable() ]; vm.changeOptions = changeOptions; vm.changeColumns = changeColumns; function changeOptions() { vm.dtOptions.withPaginationType('full_numbers') .withLanguageSource('//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/French.json') .withDisplayLength(2) .withDOM('pitrfl'); } function changeColumns() { vm.dtColumns = [ DTColumnBuilder.newColumn('id').withTitle('ID').notVisible(), DTColumnBuilder.newColumn('firstName').withTitle('First name').notVisible(), DTColumnBuilder.newColumn('lastName').withTitle('Last name').notSortable() ]; } }

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

ID FirstName LastName
{{ person.id }} {{ person.firstName }} {{ person.lastName }}
angular.module('showcase.changeOptions', ['datatables', 'ngResource']).controller('ChangeOptionsAjaxRendererCtrl', ChangeOptionsAjaxRendererCtrl); function ChangeOptionsNGRendererCtrl($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.changeOptions = changeOptions; vm.changeColumnDefs = changeColumnDefs; $resource('data.json').query().$promise.then(function(persons) { vm.persons = persons; }); function changeOptions() { vm.dtOptions.withPaginationType('full_numbers') .withDisplayLength(2) .withDOM('pitrfl'); } function changeColumnDefs() { vm.dtColumnDefs = [ DTColumnDefBuilder.newColumnDef(0).notVisible(), DTColumnDefBuilder.newColumnDef(1).notVisible(), DTColumnDefBuilder.newColumnDef(2).notSortable() ]; } }