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?
new $.fn.dataTable.ColReorder(table);– jmb.mage Sep 9 at 19:14