Динамическое изменение столбцов с помощью 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>

Вот мой джаваскрипт

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')
             ];

         };
    }
]);

Это настолько просто, насколько я могу уменьшить свои проблемы, но я все равно получаю ту же ошибку. Когда страница загружается впервые, я вижу «Столбец А» и «Столбец Б», как и ожидалось. Затем я нажимаю кнопку «Изменить столбцы», которую я получил над таблицей.

Строки таблицы исчезают, исходные два столбца остаются, и я получаю эту ошибку в консоли браузера.

Error: headerCells[i] is undefined

за которым следует неприятная трассировка стека. Я попытался скопировать руководство, на которое я ссылался ранее, с несколько незначительных отличий. Я не понимаю, почему этот простой пример у меня не работает. Кто-нибудь может помочь?


javascript jquery angularjs datatables angular-datatables
person Zack    schedule 09.09.2015    source источник
comment
Ознакомьтесь с подключаемым модулем ColReorder для DataTables.net. Добавьте его, затем вы сможете динамически (с кодом JS) воссоздать столбцы и вызвать это: new $.fn.dataTable.ColReorder(table);   -  person jmbmage    schedule 09.09.2015
comment
Вы получаете сообщение об ошибке, потому что не можете вставить пустые столбцы в таблицу данных. Столбцы должны присутствовать либо в разметке, либо в исходном массиве JSON/javascript. Легко изменить порядок столбцов (также без плагина), но столбцы должны существовать.   -  person davidkonrad    schedule 18.10.2015

Ответы (2)


arrow_upward
5
arrow_downward

Столкнулся с той же проблемой в моем проекте.

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;

Мне помогло. Он удаляет всю таблицу данных и создает ее с нуля, когда вы устанавливаете новый список столбцов.

person Aleksey Temnov    schedule 19.11.2015

arrow_upward
-1
arrow_downward

Использовать это

dtColumns.push(DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'))
dtColumns.push(DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD'))
person user2107158    schedule 19.04.2016
comment
Возможно, вы могли бы правильно отформатировать ответ и предоставить более подробную информацию. - person Phiter; 19.04.2016