10

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

Community
  • 1
  • 1
Sharma Vikram
  • 2,440
  • 6
  • 23
  • 46
  • 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()` ... – davidkonrad Mar 18 '16 at 08:58

2 Answers2

8

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

j.wittwer
  • 9,497
  • 3
  • 30
  • 32
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>
Tomislav Stankovic
  • 3,080
  • 17
  • 35
  • 42
Faz Ahmad
  • 57
  • 3