Не удается прочитать свойство «aDataSort» неопределенного в угловых таблицах данных

Я пытаюсь внедрить angular-datatables в свой проект, но он возвращает TypeError: Cannot read property 'aDataSort' of undefined

Я использую

Угловой js версии 1.4.9.

JQuery версии 2.1.1

Версия DataTable 1.10.10

Справочный сайт

таблицы угловых данных

Мой HTML-код

<div class="col-md-12" ng-controller="WithAjaxCtrl as showCase"> <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table></div>

Код моего контроллера Angular js

angular.module( 'admin.package', [
'ui.router',
'ui.bootstrap',
'datatables',
'datatables.bootstrap',
'ngResource',
'plusOne'
]).controller('WithAjaxCtrl', WithAjaxCtrl);

function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder,$http,UserService,localStorageService) {
      UserService.obj.get('packages/index',localStorageService.get('userkey').token).then(function (results) { 
        if(results.status==200){
        var vm = this;
        vm.dtOptions = DTOptionsBuilder.fromSource(results.data.packages)
            .withPaginationType('full_numbers');
        vm.dtColumns = [
           DTColumnBuilder.newColumn('id').withTitle('id'),
            DTColumnBuilder.newColumn('package_name').withTitle('Packag Name'),
            DTColumnBuilder.newColumn('amount').withTitle('Amount'),
            DTColumnBuilder.newColumn('package_duration').withTitle('Amount'),
            DTColumnBuilder.newColumn('currency').withTitle('validity')

        ];
        console.log(vm.dtColumns);
        console.log( vm.dtOptions);
      }else{
             alert('You are not a authorized user');
          }
        }, function(reason) {
            console.log(reason);
        });
    }

заранее спасибо


jquery angularjs datatables angular-datatables
person Sharma Vikram    schedule 14.03.2016    source источник
comment
Вы не можете использовать $resource в качестве базы для dataTables - если вы используете fromSource(), вы должны настроить таргетинг на файл JSON (или что-то, что предоставляет простой массив объектов JSON), если вы используете $resource, вы можете сопоставить его с массивом простых объектов и использовать его как withOption('data', value), возможно по withDataProp()...   -  person davidkonrad    schedule 18.03.2016

Ответы (2)


arrow_upward
8
arrow_downward

Вы передаете showCase.dtOptions и showCase.dtColumns директивам datatables при загрузке страницы, но они не объявляются до завершения вызова службы. Одним из обходных путей для этого было бы использование ng-if для создания html после вызова службы:

<table ng-if="showCase.authorized" datatable="" ...

Затем в вашем контроллере инициализируйте переменную перед вызовом службы и обновите ее после завершения вызова:

app.controller('WithAjaxCtrl', function WithAjaxCtrl(DTOptionsBuilder, DTColumnBuilder, UserService) {
  var vm = this;
  vm.authorized = false;
  UserService.get()...

Вот демо. Вы можете воспроизвести ошибку, удалив файл ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview

person j.wittwer    schedule 20.04.2016

arrow_upward
1
arrow_downward

Пожалуйста, убедитесь, что ваши <th> находятся внутри <thead> в вашей структуре таблицы.

Пример:

<thead>
   <tr>
     <th> name </th>
     <th> email </th>
   </tr>
</thead>
person Faz Ahmad    schedule 13.04.2020