使用角度数据表动态更改列
Posted
技术标签:
【中文标题】使用角度数据表动态更改列【英文标题】：Changing columns dynamically with angular-datatables 【发布时间】：2015-12-05 21:15:53 【问题描述】：我正在使用angular datatables，它是流行的 jquery 数据表库的角度化版本。
这是我的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”。然后我点击表格上方的“更改列”按钮。
表格行消失，原来的两列保留，我在浏览器控制台中收到此错误。
Error: headerCells[i] is undefined
接着是令人讨厌的堆栈跟踪。我试图复制我之前链接的tutorial，但有一些细微差别。我不明白为什么这个简单的例子对我不起作用。有人可以帮忙吗？
【问题讨论】：
查看 DataTables.net 的“ColReorder”插件。添加它，然后您可以动态（使用 JS 代码）重新创建列并调用：new $.fn.dataTable.ColReorder(table);
您收到错误是因为您无法在数据表中插入空列。这些列必须存在于标记中或源 JSON/javascript 数组中。重新排序列很容易（也没有插件），但列必须存在。
【参考方案1】：
在我的项目中遇到了同样的问题。
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;
对我有帮助。当您设置新的列列表时，它会删除整个数据表并从头开始创建它。
【讨论】：
【参考方案2】：使用这个
dtColumns.push(DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'))
dtColumns.push(DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD'))
【讨论】：
您或许可以正确格式化答案并提供更多详细信息。以上是关于使用角度数据表动态更改列的主要内容，如果未能解决你的问题，请参考以下文章