使用角度数据表动态更改列

Question

使用角度数据表动态更改列

Zac*_*ack 0 javascript jquery datatables angularjs angular-datatables

我正在使用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>

Run Code Online (Sandbox Code Playgroud)

这是我的 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')
             ];

         };
    }
]);

Run Code Online (Sandbox Code Playgroud)

这就像我可以减少我的问题一样简单，但我仍然遇到相同的错误。当页面第一次加载时，我会按预期看到“ColumnA”和“ColumnB”。然后我单击表格上方的“更改列”按钮。

表格行消失了，原来的两列保留了下来，我在浏览器控制台中收到了这个错误。

Error: headerCells[i] is undefined

Run Code Online (Sandbox Code Playgroud)

其次是令人讨厌的堆栈跟踪。我试图复制我之前链接的教程，但有一些细微的差别..我不明白为什么这个简单的例子对我不起作用。有人可以帮忙吗？

Answer 1

小智 5

在我的项目中遇到了同样的问题。

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;

Run Code Online (Sandbox Code Playgroud)

对我有帮助。当您设置新列列表时，它会删除整个数据表并从头开始创建它。

归档时间：	10 年，2 月前
查看次数：	5074 次
最近记录：	7 年，6 月前