Cannot read property 'aDataSort' of undefined in angular datatables

Question

I am trying to implement angular-datatables in my project but it returns "TypeError: Cannot read property 'aDataSort' of undefined

I am using

Angular js version 1.4.9.

Jquery version 2.1.1

DataTable version 1.10.10

Refrence site

angular-datatables

My Html Code

<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>

My Angular js Controller code

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);
        });
    }

Thanks in advance

Manufacture

You cannot use $resource's as base for dataTables - if you are using fromSource() you must target a JSON file (or something that delivers a plain JSON array of objects) if you use a $resource you can map it to an array of plain objects and use it as withOption('data', value), perhaps along withDataProp() ... – Sihon

Answer 1

You are passing showCase.dtOptions and showCase.dtColumns to the datatables directives when the page loads, but they are not declared until after your service call is completed. One workaround for this would be to use ng-if to construct the html after the service call:

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

Then in your controller, initialize the variable before calling the service, and updating it after the call is complete:

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

Here is a demo. You can reproduce the error by removing the ng-if. http://plnkr.co/edit/XZYOEvgy1HoMYGmGdAYj?p=preview

Hugohugon

Answer 2

Please make sure your <th> are inside of <thead> in your table structure.

Example:

<thead>
   <tr>
     <th> name </th>
     <th> email </th>
   </tr>
</thead>

Natachanatal