Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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?

share|improve this question
1  
Checkout the "ColReorder" plugin for DataTables.net. Add it, then you can dynamically (with JS code) re-create the columns and call this: new $.fn.dataTable.ColReorder(table); – jmb.mage Sep 9 '15 at 19:14
    
You get the error because you cannot insert empty columns in a dataTable. The columns must be present either in the markup or in the source JSON / javascript array. It is easy to reorder columns (also without plugin) but the columns must exists. – davidkonrad Oct 18 '15 at 13:21

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.

share|improve this answer

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

share|improve this answer
1  
You could perhaps format the answer correctly and provide more details. – Phiter Fernandes Apr 19 at 12:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.