0

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?

asked Sep 9, 2015 at 19:08
2
  • 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); Commented Sep 9, 2015 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. Commented Oct 18, 2015 at 13:21

2 Answers 2

5

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.

answered Nov 19, 2015 at 16:22
Sign up to request clarification or add additional context in comments.

Comments

-1

Use this

dtColumns.push(DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'))
dtColumns.push(DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD'))
Naren Murali
65.9k6 gold badges50 silver badges96 bronze badges
answered Apr 19, 2016 at 12:04

1 Comment

You could perhaps format the answer correctly and provide more details.

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.