DataTables внутри загрузочного аккордеона в angularjs

ОБНОВЛЕНО: в соответствии с новой информацией (с использованием angular-datatable)

Теперь решение сводится к вычислению столбцов и параметров для каждой группы аккордеонов.

Рабочий планкер с двумя группами аккордеонов

Как вы можете видеть в HTML-коде ниже, параметры и столбцы вычисляются для каждого аккордеона.

<table datatable class="table manage-user-table offer-mgt-table"  dt-options="getDtOptions(AllProduct)" dt-columns="getDtColumns(AllProduct)"></table>

Угловой код, показывающий getDtColumns и getDtOptions. Я сохранил данные очень простыми для демонстрационных целей и скопировал текущий код dtColumns, однако вы можете настроить его так, чтобы у вас было даже более 1 типа таблицы:

var app = angular.module('myApp', ['ui.bootstrap', 'datatables']);
app.controller('myCtrl', function($scope, DTColumnBuilder, DTOptionsBuilder, DTColumnDefBuilder, $timeout, AllProducts) {
  $scope.AllProducts = AllProducts


  $scope.getDtColumns = function(allProduct) {
    var items = allProduct.ProductList;
    if (allProduct.dtColumns) allProduct.dtColumns.length = 0;
    allProduct.dtColumns =  allProduct.dtColumns || [];
    var dtColumns = allProduct.dtColumns;
    dtColumns.push(DTColumnBuilder.newColumn('').withTitle('').notSortable()
      .renderWith(function(data, type, full, meta) {
        return '<input type="checkbox" ng-model="showCase.selected[' + full.id + ']"/>';
      }));


    for (var key in items[0]) {
      if (key == "ProductName" || key == "LongDistanceMinutes" || key == "IsCallWaiting") {
        dtColumns.push(
          DTColumnBuilder.newColumn(key).withTitle(key).notSortable()
        )
      }
    }

    return dtColumns;
  };

  $scope.getDtOptions = function(allProduct) {
    if (allProduct.options) return allProduct.options;
    var items = allProduct.ProductList;
    allProduct.options = allProduct.options || DTOptionsBuilder.newOptions().withOption('aaData', items);
    return allProduct.options;     
  };


});

СТАРЫЙ ОТВЕТ без angular-datatable

Прежде всего, я не рекомендую jQuery DataTable или любой другой компонент jQuery в приложениях AngularJS. Я лично стараюсь не связывать jQuery и не выполнять манипуляции с DOM с помощью jQuery.

Однако, чтобы заставить вас работать с тем, что у вас есть, я предлагаю следующее: -

Удалите эти две строки, потому что простое добавление этих атрибутов datatable динамически не вызовет привязку DataTable:

angular.element('#dtVoice').attr('datatable', '')
        }
       $compile(angular.element('#dtVoice'))($scope);

и попробуйте использовать что-то вроде этого: -

$('#dtVoice').DataTable({columnDefs: $scope.dtColumns});

Далее, чтобы немного почистить, я создаю новую директиву (просто набрав вслух):

app.directive('myDatatable`, function(){
return {
   restrict: 'A',
   scope: {
       'dtColumns': '='
   }
   link: function($scope, elem, attr) {
        $('#dtVoice').DataTable( {columnDefs: $scope.dtColumns});    
   } 
};
});

и ваша таблица выглядит примерно так:

<table id="dtVoice" 
    class="table manage-user-table offer-mgt-table" 
      dt-options="dtOptions" 
      dt-columns="dtColumns" my-datatable></table>

У меня была такая же проблема на переходе. Пожалуйста, используйте ng-if в качестве флага для воссоздания таблицы, когда элемент аккордеона активен. Компоненты аккордеона и табуляции избегают отображения таблицы.

Код ниже может помочь. Обратите внимание на ng-click и ng-if

<accordion>
                <accordion-group ng-repeat="AllProduct in AllProducts">
                    <accordion-heading ng-click="setGroup('AllProduct.TypeName')">
                        {{AllProduct.TypeName}}
                       </accordion-heading>

                       <table id="dtVoice" ng-if="group=='AllProduct.TypeName'" class="table manage-user-table offer-mgt-table" dt-options="dtOptions" dt-columns="dtColumns"></table>

                </accordion-group>

            </accordion>