CODEWITHSUNDEEP
javascriptjqueryangularjsdatatablesangular-datatables
Zack
Zack

Reputation: 13982

Changing columns dynamically with angular-datatables

I am using angular datatables, an angularized version of the popular jquery datatables library.

Here is my html

<body ng-controller="TestCtrl">

    <input type="button" ng-click="changeColumns()" value="Change Columns"/>
    <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>

</body>

Here is my javascript

var module = angular.module('TestApp', ['datatables']);

module.controller('TestCtrl', [
    '$scope',
    'DTOptionsBuilder',
    'DTColumnBuilder',
    function($scope, DTOptionsBuilder, DTColumnBuilder) {

         $scope.dtOptions = DTOptionsBuilder.newOptions();

         $scope.dtColumns = [
             DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
             DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB')
         ];

         $scope.changeColumns = function() {
             $scope.dtColumns = [
                 DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
                 DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB'),
                 DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'),
                 DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD')
             ];

         };
    }
]);

This is about as simple as I can reduce my problems down to, yet I still get the same error. When the page first loads, I see 'ColumnA' and 'ColumnB' as expected. Then I click on the 'Change Columns' button that I have got above the table.

The table rows go away, the original two columns stay, and I get this error in the browser console.

Error: headerCells[i] is undefined

followed by a nasty stack trace. I have tried to copy the tutorial that I had linked previously, with a few minor differences.. I don't get why this simple example is not working for me. Could anyone please help?

Upvotes: 0

Views: 5904

Answers (2)

user2107158
user2107158

Reputation: 51

Use this

dtColumns.push(DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'))
dtColumns.push(DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD'))

Upvotes: -1

Aleksey Temnov
Aleksey Temnov

Reputation: 96

Faced the same issue in my project.

vm.table.dtInstance.DataTable.destroy();
angular.element('#table-id').children('thead').children().remove();
angular.element('#table-id').children('tbody').children().remove();
vm.table.dtColumns = columnsList;

Helped for me. It deletes whole datatable and creates it from scratch when you set new columns list.

Upvotes: 5

Related Questions