使用angular-datatables动态更改列 [英] Changing columns dynamically with angular-datatables
问题描述
我正在使用角度数据表，这是流行的有角度的版本jQuery数据表库.
I am using angular datatables, an angularized version of the popular jquery datatables library.
这是我的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>
这是我的JavaScript
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')
];
};
}
]);
这差不多可以简化我的问题，但仍然会出现相同的错误.首次加载页面时，我会按预期看到"ColumnA"和"ColumnB".然后，我点击表格上方的更改列"按钮.
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?
推荐答案
在我的项目中遇到了同样的问题.
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.
这篇关于使用angular-datatables动态更改列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
