使用angular-datatables动态更改列
使用angular-datatables动态更改列
提问于 2015-09-10 03:08:36
我使用的是angular datatables，这是流行的jquery datatables库的一个角度版本。
这是我的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
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’。然后，我点击表格上方的“Change Columns”按钮。
表行消失了，原来的两列保留了下来，我在浏览器控制台中得到了这个错误。
Error: headerCells[i] is undefined然后是一个令人讨厌的堆栈跟踪。我已经尝试复制我之前链接的tutorial，但有一些细微的差异。我不明白为什么这个简单的例子对我不起作用。有人能帮帮忙吗？
回答 2
Stack Overflow用户
发布于 2015-11-20 00:22:02
在我的项目中遇到了同样的问题。
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;对我有帮助。当你设置新的列列表时，它会删除整个数据表并从头开始创建。
Stack Overflow用户
发布于 2016-04-19 20:04:49
使用这个
dtColumns.push(DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'))
dtColumns.push(DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD'))页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32487401
复制相关文章
相似问题